Question

I need to choose one class from the parent element that I’ve clicked in a list format. All the while preventing the other classes with the same class name from showing.

So, for example:

$('ul').click(function() {
    $('li').next(".info").css({ "display" : "block" });
});

While I have .info set to display:none;

And my html code is:

<ul>
    <li><span>Guy</span></li>
    <li class="info">
        <p>This should pop up when I click on the "Guy" span.</p>
    </li>
</ul>

Although, I can’t seem to figure out why it won’t work/fire.

Any help would be hugely appreciated.

Answer 1

You can bind the event to the span elements.

$(document).ready(function(){
    $('ul span').click(function() {
        // $('.info').hide()
        $(this).parent().next().show();
    });
})

http://jsfiddle.net/2mvdt/