How to change class on click?

Ionic Framework ionic-v3
#1

Hi,

I am trying to make a list appear or disappear on button click. It (obviously) not working. Any help?

    <div *ngFor="#item1 of ListOfItem" >
        <div *ngIf=" item1.listofitem > 0 " >
        <button ng-click="Collapsable = !Collapsable" > Nombre de lettre {{item1.title}}</button>
      <ul ng-class="Collapsable ? '' : 'collapseditem'">
        <li *ngFor="#theItem of item1.listofitem">{{theItem}}</li>      
      </ul>
    </div>
</div>

And I declare a “Collapsable” boolean in my ts file.

public Collapsable :boolean;

The css:

        .collapseditem{
            line-height: 0; 
            background-color:  red;
        }
#2

Rather than using ng-class in ul tag try using ng-if. It should work fine

<ul ng-if="Collapsable ? '' : 'collapseditem'">
    <li *ngFor="#theItem of item1.listofitem">{{theItem}}</li>      
</ul>
#3

Hi,

THanks. It is working like a charm…but I’d like only the click item to be shown/hidden. Any idea?

#4

Hi I did not get you. Can you be more precise like show the code where you want the functionality to be working as you required.

#5

I have found a solution by putting all the boolean in an array but it is not wroking.

<button ng-click="Collapsable["the index of the item] = !Collapsable["the index of the item]" >

What I want is to hide/show the

    element when button is click.
    In jquery it would be something like: 
$( "#clickme" ).click(function() {
  $( "#book" ).toggle( "slow", function() {

  });
});
#6

For each element, the is a button and an ul. I want to be able to show or hide the ul on click
(code like)

button
ul list

button
ul list

button
ul list

#7 
  <div *ngFor="#item1 of FullArray">
    <div *ngIf=" item1.contain.length > 0 " >
    <button ng-click=" item1.Display = !item1.Display " > {{item1.SomeTexte}}</button>
  <ul *ngIf="item1.Display ">
    <li *ngFor="#theseitems of item1.contain" > {{theseitems}}</li>      
    </ul>
</div>

FullArray = new Array<SomeModel>()

class WordsListModel {   
    public constructor(public SomeTexte : string, public Words : string[], public Display :boolean){
        this.SomeTexte=SomeTexte;
        this.Words=Words;
        this.Display=Display;
}}
#8

I found my way by doing a funciton:
<button (click)=“ShowHide(items)” >

#9

I’m surprised ng-click works at all. I thought it had to be (click) now.

#10

you are right!! I figured it out.

#11

Best answer I have found about dynamic styling so far.