How to show hide div ?

Question

0.00/5 (No votes)

See more:

on click an English button it shows its corresponding div at the same time if I clicked on another button then it shows its div but the previous one not closed. I want that on click English it shows the div and on again click it close.
Note that makes it dynamically because I don't know how many lang are there.
make sure you don't make it for static data.

here is link of my standalone example in

stackblitz
<pre><a href="https://stackblitz.com/edit/angular-showhide-088?file=src%2Fapp%2Fsho-hide%2Fsho-hide.component.html"></a>

What I have tried:

onclickEnglishDiv(clickLang,index){

  if (this.visibleIndex === index) {
    this.visibleIndex = -1;
  } else {
    this.visibleIndex = index;
  }

Html

<pre>    <div *ngFor="let lang of langList;let index = index" >
          <div class="engbutton">
              <button class="englishButton" (click)="onclickEnglishDiv(lang,index)">{{ lang }}</button>
              <div *ngIf="visibleIndex === index" class="knowEnglish">
                <div>
                  <div *ngFor="let data of filteredLangList" class="engDivObj">{{data.name}}</div>
                </div>
              </div>
            </div>
      </div>

Posted 28-Nov-19 20:36pm

Member 14637638

Updated 2-Dec-19 21:59pm

v3

Add a Solution

Comments

Mehul M Thakkar 29-Nov-19 3:33am

so what is the problem? The example is working as per your need.

[no name] 29-Nov-19 5:53am

I want that on click English it opens its eng div and on click Hindi, it opens its Hindi div but not to be close the eng div.
>user can see all the div at a time.
> I want it to be dynamically

here is the link you can see how it show .i want this.
https://stackblitz.com/edit/angular-nxjuby-vxxeqf?file=src/app/app.component.ts

but I am unable to understand this one.
could you convert it to angular 7

Mehul M Thakkar 29-Nov-19 6:18am

because visibleIndex is updating everytime. you need to create different array for visibility for each language.

Declare visibleLang:any[]=[]
and add a line in onclickEnglishDiv function,
this.visibleLang[clickLang] = !this.visibleLang[clickLang];

In template change in if condition visibleIndex === index to

visibleLang[lang]

[no name] 2-Dec-19 2:25am

thanks, bro, it is working.

ZurdoDev 2-Dec-19 13:19pm

please post as solution.

Mehul M Thakkar 3-Dec-19 4:00am

posted as a solution.

1 solution

Add a Solution

Add your solution here

Treat my content as plain text, not as HTML

Preview 0

…

Existing Members

Sign in to your account

...or Join us

Download, Vote, Comment, Publish.

Your Email
Password
Forgot your password?

Your Email
This email is in use. Do you need your password?
Optional Password

I have read and agree to the Terms of Service and Privacy Policy
Please subscribe me to the CodeProject newsletters

When answering a question please:

Read the question carefully.
Understand that English isn't everyone's first language so be lenient of bad spelling and grammar.
If a question is poorly phrased then either ask for clarification, ignore it, or edit the question and fix the problem. Insults are not welcome.
Don't tell someone to read the manual. Chances are they have and don't get it. Provide an answer or move on to the next question.

Let's work to help developers, not make them feel stupid.

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

Mehul M Thakkar · Answer 1 · 2019-12-02T22:00:00

VisibleIndex is updating every time. you need to create different array for visibility for each language. Declare

visibleLang:any[]=[];

and add a line in onclickEnglishDiv function,

this.visibleLang[clickLang] = !this.visibleLang[clickLang];

In template change in if condition

visibleIndex === index

to

visibleLang[lang]