无法显示和隐藏div

Question

 <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( div s) are hidden. I have around ten li .

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

Answer 1

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();
});

Answer 2

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()