I have a button (let's call it main-button) with inside it three divs:

1. First div containing a poster of a comic
2. Second div containing info about the comic
3. Third div containing a button (let's call it collapse-button)

The info-div and collapse-button are hidden by default and shown when the main-button is pressed. This results in the following: you see the poster of a comic and when you click on it, info about it appears below the poster. The collapse-button that appears at the bottom is used to... collapse it back: it hides the second div and itself making the whole contraption go back to it's normal state.

The problem is the following:

When I click on the collapse-button, the event listener for "click" is run and everything collapses. However, for some reason, the event listener of the main-button is also triggered and everything is shown again. A loop. You can show the info but never hide it again.

How can I make sure that when collapse-button is pressed, main-button isn't also triggered?

Thanks!

CodePudding user response：

Inside the "click" function you can stop the propagation of the event so it will not reach the other components
event.stopImmediatePropagation();