CODEWITHSUNDEEP
javascriptjqueryhtml
Menci
Menci

Reputation: 9

not able to show and hide div

 <ol class="novice">
<li>
    <p class="glava">HTML</p>
    <div class="vsebina">
        <p>Hyper Text Markup Language (slovensko jezik za označevanje nadbesedila...</p>
    </div>

</li>
<li>
    <p class="glava">CSS</p>
    <div class="vsebina">
        <p>Cascading Style Sheets (kratica CSS) so predloge, ki določajo izgled ...</p>
    </div>
</li>

When I click on the p class="glava" I want that the specific div that is located in this li is shown(.show()) and all the others(divs) are hidden. I have around ten li.

$("p.glava").click(function () {
    $(something).show();
    //$(everything else ).hide();

Upvotes: 0

Views: 66

Answers (2)

charlietfl
charlietfl

Reputation: 171679

Numerous ways to traverse to isolate specific instance. All start with this being the element instance of that class that was clicked

$("p.glava").click(function () {
   $('.vsebina').hide();

   $(this).parent().find('.vsebina').show()
   // or
   $(this).next('.vsebina').show()  
   // or
   $(this).siblings('.vsebina').show()  
}) ;

References

  1. next()
  2. parent()
  3. find()
  4. siblings()

Upvotes: 1

Dragos Podaru
Dragos Podaru

Reputation: 452

With Slide Toggle animation

$(".glava").click(function () {
    $(this).closest('li').find('.vsebina').slideToggle('slow');
});

With Fade Toggle animation

$(".glava").click(function () {
    $(this).closest('li').find('.vsebina').fadeToggle('slow');
});

And just to hide 

$(".glava").click(function () {
    $(this).closest('li').find('.vsebina').hide();
});

Upvotes: 2

Related Questions