Toggle button - show / hide information

Question

Can someone help me hide / show the information when I click on the icon (arrow). I tried to use javascript, although it is not the best way, but it also didn't work.

I intend that by clicking on the image https://img.icons8.com/android/24/000000/down.png, the information below will be hidden and that image will change to the image of the upward facing arrow https://img.icons8.com/android/24/000000/up.png

When you click on the up-facing sta the information appears again and that same image is replaced by the downward-facing arrow image.

Can someone help me?

DEMO - STACKBLITZ

CODE


    
    
        
        
  
    {{item.name}}
    
        
  
    
    
        
            
    
        
            @{{item.name}}
            {{item.date}}

user_13093310 · Answer

First of all, remove your styles for hide1 class. It's better to rely on *ngIf directive in Angular:

Then implement method to toggling shown property:

toggle(item) {
  item.shown = !item.shown;
}

Now you have to bind this method to DOM event on div wrapping your arrows:

And final step is to use *ngIf directive on other element you want to toggling:

user_7185953 · Answer

HTML5 introduced a

and

tag to allow you to toggle information.

Here's an example:


Information you want shown
Information you want toggled

Toggle button - show / hide information

2 Answers