Question

I have the following script which is partially working.

HTML:

<div class="navigation3">
    click me
</div>
<div class="dropdown">
    <div class="items">icon Default 3</div>
</div>

jQuery:

$('.navigation3').click(function(event) {
    $(this).toggleClass('active');
    $(".dropdown").toggle();
});​

The .active part works were the clicked .navigtion3s become red, if I click all three, all three go red.

The bit which is not working is the .dropdown. It should be dropping directly under the .navigtion3 divs. Plus at the moment, it is only displaying 1 .dropdown at a time, it should display all if all the .navigation3s are .active.

Also, based on user selection, I will not know how many .navigation3s and .dropdowns will be displayed on the users screen.

I can’t seem to get this to work and would appreciate some jQuery expert help.

jsFiddle:

This is what I currently have:
http://jsfiddle.net/MTESY/12/

Answer 1

How about something like this http://jsfiddle.net/chrismoutray/MTESY/16/

$('.navigation3').click(function(event) {
    var $nav3 = $(this),
        $dd = $nav3.next('.dropdown');

    $nav3.toggleClass('active');

    var offset = 30,
        offsettop = $nav3.offset().top + $nav3.height() + offset,
        offsetleft = $nav3.offset().left;

    $dd.css({
        top: offsettop,
        left: offsetleft
    });

    $nav3.hasClass('active') ? $dd.show() : $dd.hide();
});

The 2 bits to focus on here are; find the correct dropdown element

$nav3.next('.dropdown');

And make sure to place the element correctly

$dd.css({
    top: offsettop,
    left: offsetleft
});

Its not perfect but it will get you started