Как свернуть и развернуть по углам?

Я пытаюсь свернуться и развернуться. Поэтому, когда пользователь нажимает на «Заголовок раздела», соответствующая информация сворачивается.

@Component({
selector: 'knowledge-base',
  template: `
    <div *ngFor = "let section of questions">
      <h2>{{section.sectionTitle}}</h2>
      <div class = "submenu">
       <div *ngFor = "let q of section.questions">
        <div class = "questions"> <span class = "question">Q.</span> {{q.question}}<br/></div>
        <div class = "answers"> <span class = "answer">A.</span> {{q.answer}}<br/></div>
       <div *ngIf = "q.issues?.length">
         <span>Issues:</span>
         <div class = "issues" *ngFor = "let issue of q.issues">{{issue}}<br/></div>
      </div>
    </div>
  </div>
  <hr>
</div>
`,
styles: [`
h2 {
  margin-left: 15px;
  margin-bottom: 20px;
  margin-top: 25px;
}

hr {
  width: 90%;
  margin: 0px auto;
}

.submenu {
  margin-left: 15px;
}

.questions {
  font-weight: bold;
  margin-left: 15px;
}

.answers {
  font-weight: italic;
  font-style: italic;
  margin-top: 15px;
  margin-left: 15px; margin-bottom: 20px;
}

.issues {
  float: left;
  color: red;
  width: 100%;
   margin-top: 15px;
   margin-bottom: 15px;
  }

.question {
  font-weight: bold;
}

.answer{
  font-weight: bold;
}

` ],

})
export class KnowledgeBaseComponent {
questions = knowledgeData()

}

Это данные, которые я хочу свернуть и развернуть. Я пробовал использовать div вокруг заголовков разделов с помощью css, но, похоже, не работает

export const knowledgeData = (): KnowledgeDataModel[] =>  [
{
sectionTitle:'Mission and Vision Statements',
questions: [
     {
    question: 'What is our short term mission and our long term vision',
    answer: `With the current advancement in the medical field, it means that we can live longer than 
    ever before, however, it comes with its issues.`,
    issues: [],
      },
    ],
  },
 {
sectionTitle:'Account Management',
questions: [
  {
    question: 'What are accounts and how do I make one?',
    answer: 'Accounts group together users, there are provider accounts for agents and consumer 
    accounts for users',
    issues: [
      'currently unable to rename an account',
      'currently unable to delete an account once users have been added',
    ],
  }
]

Я хочу раскрыть, когда пользователь нажимает «Заголовок раздела», и свернуть, когда он нажимает «Заголовок раздела»?

Спасибо