To collapse a div in an HTML Angular environment, the button must be clicked twice

Question

To collapse a div in an HTML Angular environment, the button must be clicked twice

A series of divs in my code are currently grouped together with expand and collapse functionality. It works well, except for the fact that I have to click a button twice in order to open another div. Initially, the first click only collapses the first div.

<div *ngFor="let item of data; let i = index">
      <button
        (click)="setIndex(i)"
      >
        <span
          [translate]=“item.title”
        ></span>

      </button>
      <div
        [class.collapse]='currentIndex !== i'
      >
        <div [innerHTML]=“item.description | translate"
        ></div>
      </div>
      <hr>

    </div>

In addition, the typescript function in question is as follows:

setIndex(i) {
    this.currentIndex = this.currentIndex === -1 ? i : -1;
  }

I attempted changing the click event to mousedown or keydown, but unfortunately, it did not yield the desired outcome.

javascript html css angular typescript

Answer 1

Answer №1

To enhance the functionality of your setIndex function, modify it as shown below:

setIndex(i) {
   this.currentIndex = this.currentIndex === i ? -1 : i;
}

It is crucial to update the currentIndex value with the newly clicked index i in order to ensure that the corresponding div is displayed properly.

If the current div is already visible and you click on it again (meaning currentIndex === i), simply set it back to -1 to collapse it.

Answer 2

To enhance the functionality of your setIndex function, modify it as shown below:

setIndex(i) {
   this.currentIndex = this.currentIndex === i ? -1 : i;
}

It is crucial to update the currentIndex value with the newly clicked index i in order to ensure that the corresponding div is displayed properly.

If the current div is already visible and you click on it again (meaning currentIndex === i), simply set it back to -1 to collapse it.

Answer 3

Answer №2

Revise your setIndex() as shown below.

Explanation

We initially set currentIndex = -1.

When a user clicks on any button, we need to check if currentIndex is -1 and then assign the value of i to currentIndex.

Now there are 2 more scenarios to consider. If a user keeps clicking on the same button repeatedly, we have to verify i === currentIndex

The last scenario is that when the first div is open with currentIndex = 0, and subsequently, if a user clicks on the third button leading to index = 2, we must first assign

currentIndex = -1 and then currentIndex = i

html

<div *ngFor="let item of data1; let i = index">
      <button (click)="setIndex(i)">
        <span>{{item.title}}</span>
      </button>
      <div [hidden]='currentIndex !== i'>
        <div>{{item.description}}</div>
    </div>
    <hr>
</div>

ts

setIndex(i) {
    if (this.currentIndex === -1) {
        this.currentIndex = i;
    } else if (this.currentIndex === i) {
        this.currentIndex = i;
    } else {
        this.currentIndex = -1;
        this.currentIndex = i;
    }
}

Note:

I have used [hidden] here just for demonstration purposes. You can customize it as needed.

Answer 4

Revise your setIndex() as shown below.

Explanation

We initially set currentIndex = -1.

When a user clicks on any button, we need to check if currentIndex is -1 and then assign the value of i to currentIndex.

Now there are 2 more scenarios to consider. If a user keeps clicking on the same button repeatedly, we have to verify i === currentIndex

The last scenario is that when the first div is open with currentIndex = 0, and subsequently, if a user clicks on the third button leading to index = 2, we must first assign

currentIndex = -1 and then currentIndex = i

html

<div *ngFor="let item of data1; let i = index">
      <button (click)="setIndex(i)">
        <span>{{item.title}}</span>
      </button>
      <div [hidden]='currentIndex !== i'>
        <div>{{item.description}}</div>
    </div>
    <hr>
</div>

ts

setIndex(i) {
    if (this.currentIndex === -1) {
        this.currentIndex = i;
    } else if (this.currentIndex === i) {
        this.currentIndex = i;
    } else {
        this.currentIndex = -1;
        this.currentIndex = i;
    }
}

Note:

I have used [hidden] here just for demonstration purposes. You can customize it as needed.

To collapse a div in an HTML Angular environment, the button must be clicked twice

Answer №1

Answer №2

Explanation

html

ts

Note:

Similar questions

Strategies for handling uncaught promise rejections within a Promise catch block

Is it possible to generate an interactive HTML form using JSON information?

Is the issue of res.locals not being properly propagated to all requests in Express middleware persisting?

Error occurs when attempting to access window.google in Next.js due to a TypeError

I'm a beginner in React Native and I'm attempting to display a "Hello World" text when the button is pressed. Unfortunately, the code below is not

Create your masterpiece on a rotated canvas

The enigmatic loop traversal

Encountering issues with React Nextjs - unable to utilize useState hook or

Leveraging the package.json file to execute a separate script within the package.json file

Create dual modules within a single project

Is there a solution to fix the issue with IE causing hover effects not to

Ways to switch Bootstrap 5 accordion element using JavaScript

How come despite installing node 10.1.0, the system is showing the installed version as 5.6.0?

Can you determine if the user is holding the CTRL key in a universally recognized way?

Issue encountered while trying to display images next to each other using only HTML and CSS

Discovering the method for accessing a variable within jQuery from a regular JavaScript function

Exploring the contents of JSON data using json-server

What causes an image's size to change when it floats within the parent container?

Updating JSON in JavaScript

Tips for efficiently showcasing array responses in Vue.js and Laravel