CODEWITHSUNDEEP
jquery
pobliska
pobliska

Reputation: 247

How edit this code to display only one div? Jquery

How edit this code, to make, when I click on for example #pizza-show the earlier chosen slide will slide out? Now when I click on every 4 functions i can see all 4 slides but I need to se always only one slide. Hop, that I explained this. 

<script>
$(document).ready(function(){
  $("#hamburgery-show").click(function(){
    $("#hamburgery").slideToggle();
  });
   $("#pizza-show").click(function(){
    $("#pizzy").slideToggle();
  });
   $("#piwa-show").click(function(){
    $("#piwa").slideToggle();
  });
   $("#zupy-show").click(function(){
    $("#zupy").slideToggle();
  });
});
</script>

Upvotes: 0

Views: 31

Answers (1)

tymeJV
tymeJV

Reputation: 104775

From the above code, you can use the $= ends with selector:

Inside your click functions, run this line first:

$("[id$='-show']:visible").slideUp();

This will find all elements that have an ID ending with -show (from your code sample) and slide them up before toggling the clicked element. Ideally you should be using a common class on all these elements so you can just call $(".class").slideUp() before you take any action on the clicked element.

Upvotes: 1

Related Questions