title: Creating a collapsible list with NativeScript
body: <p>I am trying to create a FAQs type of screen in my app however am not finding a way to show questions and collapse the answers when someone tap in the item.
  I already tried using RadDataForm Groups and was able to do the collapsing but I was not able to resize the screen and elements so now am trying with Accordion.
  Still I am not able to collapse or even show the questions. I saw someone here saying they were able to make the list work without Accordion just by using collapse and visible attributes but they did not share how they did it.
  When I click in the names on the list nothing happens. I would like to find a simple and effective solution for this problem.
  My code:</p>
  
  <pre><code>    &lt;Accordion [items]="myQuestions" itemTapped="tapped" headerTextBold="true" headerTextColor="white" headerColor="pink" headerTextColor="blue"
    allowMultiple="true"&gt;
  
    &lt;ng-template accordionHeaderTemplate let-item="item" let-i="index"&gt;
        &lt;GridLayout backgroundColor="blue" columns="auto,*"&gt;
            &lt;Label [text]="item.question"&gt;&lt;/Label&gt;
        &lt;/GridLayout&gt;
    &lt;/ng-template&gt;
  
    &lt;ng-template accordionItemTemplate let-item="item" let-parent="parentIndex" let-even="even" let-child="childIndex"&gt;
        &lt;StackLayout&gt;
            &lt;Label [text]="item.description"&gt;&lt;/Label&gt;
        &lt;/StackLayout&gt;
    &lt;/ng-template&gt;
  
    &lt;!-- IOS Only
    &lt;ng-template accordionFooterTemplate let-item="item" let-i="index"&gt;
        &lt;GridLayout backgroundColor="yellow" columns="auto,*"&gt;
            &lt;Label [text]="hi"&gt;&lt;/Label&gt;
            &lt;Label col="1" text="-"&gt;&lt;/Label&gt;
        &lt;/GridLayout&gt;
    &lt;/ng-template&gt; --&gt;
  &lt;/Accordion&gt;
  </code></pre>
  
  <p>Component:</p>
  
  <pre><code>import { Component, OnInit, ViewChild} from "@angular/core";
  import { Router } from "@angular/router";
  import { Question } from "../../shared/question/question";
  import { Observable } from "tns-core-modules/data/observable";
  import { ObservableArray } from "tns-core-modules/data/observable-array";
  // import { RadDataFormComponent } from "nativescript-ui-dataform/angular";
  
  @Component({
    selector: "question",
    moduleId: module.id,
    templateUrl: "./question.html",
    styleUrls: ["./question-common.css", "./question.css"]
  })
  export class QuestionComponent extends Observable{ 
    public myQuestions: ObservableArray&lt;any&gt;;
    // @ViewChild('myRuntimeDataFormComp') myRuntimeDataFormComp: RadDataFormComponent;
    constructor(){
      super();
      this.myQuestions =new ObservableArray([
        new Question("Topic 1", "lorem ipsum lorem ipsum lorem ipsum"),
        new Question("Topic 2", "lorem ipsum lorem ipsum lorem ipsum"),
        new Question("Topic 3", "lorem ipsum lorem ipsum lorem ipsum"),
        new Question("Topic 4", "lorem ipsum lorem ipsum lorem ipsum"),
        new Question("Topic 5", "lorem ipsum lorem ipsum lorem ipsum"),
        new Question("Topic 6", "lorem ipsum lorem ipsum lorem ipsum")
        ]);   
    }
  
  }
  </code></pre>
  
  <p>My screen:</p>
  
  <p><a href="https://i.stack.imgur.com/51p5fl.png" rel="noreferrer"><img src="https://i.stack.imgur.com/51p5fl.png" alt="enter image description here"></a></p>