Question

hey guys,
i’m trying to do a rather simple select box by myself.

<div class="select">
    <ul>
        <li class="option darr">Dropdown one</li>
        <li class="option">Dropdown two</li>
        <li class="option">Dropdown three</li>
    <ul>
</div>

When the page is loaded only the first li-item is set to display:block. When I click on the first one, all options should be displayed.

So far so good…

/*select box*/
$('.select ul li.option').click(function() {
    $('.select ul li.option').fadeIn('fast');
});

However now I’m stuck. When I click e.g. on the second option this one should have the .darr class applied and the the dropdown should collapse again with the second option visible. You know what I mean!

Any idea how to solve that? With toggle()?

Here is a fiddle, so you see what I mean! http://jsfiddle.net/WFTvq/

Answer 1

$('.select ul li.option').click(function() {
        $(this).siblings().toggle().removeClass('darr');
        $(this).addClass('darr');
    });

can you check this?