Question

Well, im working on a lightweight simple dropdown. And I came out with this little problem:

<script>
$(document).ready(function () {
$('ul li:first a').click(function () {
    if ($(this).attr('class') != 'active') {
        $('.hideContent').slideUp(300);
        $('.showContent').removeClass('active');
        $(this).addClass('active').next('ul').slideDown(300);
        event.stopPropagation();
    }
    else {
        $(this).removeClass('active');          
        $('.hideContent').slideUp();
    }       
});
});
</script>

The :first is only triggering for the first ul. Im working with multiple uls right now:

    <ul>
    <li><a href="#"><span class="plus">+</span><span class="minus">-</span>Administração</a>
        <ul class="hideContent">
            <li><a href="#">Item</a></li>
            <li><a href="#">Item</a></li>
            <li><a href="#">Item</a></li>
            <li><a href="#">Item</a></li>
            <li><a href="#">Item</a></li>
        </ul>
    </li>
</ul>
    <ul>
    <li><a href="#"><span class="plus">+</span><span class="minus">-</span>Administração</a>
        <ul class="hideContent">
            <li><a href="#">Item</a></li>
            <li><a href="#">Item</a></li>
            <li><a href="#">Item</a></li>
            <li><a href="#">Item</a></li>
            <li><a href="#">Item</a></li>
        </ul>
    </li>
</ul>

The :first shouldnt trigger the first li of EACH ul? Or am I working the wrong way around?

Thanks in advance.

Answer 1

First only matches one element, try using :first-child instead.

While this matches only a single element, :first-child can match more
than one: One for each parent.

http://api.jquery.com/first-selector/