Toggle the element that is clicked and hide all the rest

Question

I'm trying to figure out how I can switch the element that is clicked and then hide all the other elements only when the other elements are closed.

Here is the site I'm working on.

http://digitalspin.ph/test/manosa/campanilla-features-2/

Basically, when a user clicks on a point of interest. A small window will appear and then hide all the other “points of interest” on the screen. If the user decides to close the small one. Other attractions will appear.

Here is the HTML structure

<div class="poi poi-one"> <form> <button class="show-poi-window" type="button">X</button> </form> <div class="poi-window hide animated"> <img src="http://localhost/man/wp-content/uploads/2015/08/solid-carbonized-strandwoven-bamboo.png"> <div class="poi-description"> <form> <input class="close-poi-window" type="button" value="X"> </form> <h2>Solid Carbonized Strandwoven Bamboo </h2> <p>The rich earthly shade of the Solid Carbonized Strandwoven Bamboo for the flooring genuinely expresses authentic Filipino home design, aside from being nature and environment friendly as well.</p> </div> </div> </div> 

Here is javascript

 $(document).ready(function () { $('button.show-poi-window').click(function () { $(this).closest('div').find('.poi-window').addClass('fadeIn').removeClass('hide fadeOut'); $('button.show-poi-window').addClass('fadeOut').removeClass('fadeIn') $('#slider ul.slides li').append('<div class="slide-overlay"></div>'); }) $('input.close-poi-window').click(function () { $('.poi-window').removeClass('fadeIn').addClass('fadeOut'); $('button.show-poi-window').addClass('fadeIn').removeClass('fadeOut'); $('.slide-overlay').remove(); }) }) 

Answer 1

You can try this ...

use identifiers in your html code first

Your HTML should look like this

  <div class="poi" id="poi1"> ...your content for this goes here..... </div> <button class="button.show-poi-window">Click Me</button> <div class="poi" id="poi2"> ...your content for this goes here.... </div> <button class="input.close-poi-window">Click Me</button> 

Here is your javascript

  $(document).ready(function(){ $('button.show-poi-window').click(function(){ $('.poi-window').hide(); $('#poi1').show(); }); $('input.close-poi-window').click(function(){ $('.poi-window').hide(); $('#poi2').show(); }); }); 

And here is how you can show / hide your content, the rest of the add and animation part can be integrated according to your interests, thank you very much ...