Toggle only one dropdown from multiple with same class

Question

I found a nice script for dropdowns. The thing is, I'm trying to have multiple dropdowns on the same page, but use the same class so I don't have to duplicate the styles.

The script is form here:

http://www.jankoatwarpspeed.com/post/2009/07/28/reinventing-drop-down-with-css-jquery.aspx

I've downloaded the code and tried adding two on a page but when clicking on one of them, it triggers both. I've tried several things with .parent(), .children() etc but nothing has worked.

Could anyone help and point me in the right direction? Here's the demo page where the source code can be seen:

http://www.jankoatwarpspeed.com/examples/reinventing-drop-down/

UPDATE: And here's is a copy of that demo page I was working on: http://multideveloper.com/tests

Thanks a million!

Alright alright! ;) Here's what I tried: http://multideveloper.com/tests/. If you look at the source code you can see a lot of commented out code I've used and tested. — elmediano, Oct 01 '12 at 12:40

score 1 · Answer 1 · answered Oct 01 '12 at 12:19

1

Better to define an ID, if you already have that. Define one more class, different for each dropdown. You can define more than one class for single element.

answered Oct 01 '12 at 12:19

Riz

9,703
8
38
54

Thanks a lot. But the idea is to generate those dropdowns dinamically through nested loops. I know I could maybe write a counter and assign different IDs to each one but I was looking for a simpler solution ;) – elmediano Oct 01 '12 at 12:41
you got simplest approach. :) – Riz Oct 01 '12 at 12:43

techfoobar · Accepted Answer · 2012-10-01T12:28:36.083

This is because the drop down component assumes there is only one instance and binds to it by the class name.

With a few changes in the script, you can get multiple instances working. The summary of changes are below.

Demo: http://jsfiddle.net/fZbx6/1/

I've put in comments to highlight the changes.

$(document).ready(function() {
    $(".dropdown img.flag").addClass("flagvisibility");

    $(".dropdown dt a").click(function() {

        // old
        //$(".dropdown dd ul").toggle();

        // new
        $(this).parents(".dropdown").find("dd ul").toggle();

    });

    $(".dropdown dd ul li a").click(function() {
        var text = $(this).html();

        // old
        //$(".dropdown dt a span").html(text);
        //$(".dropdown dd ul").hide();

        // NEW
        var dd = $(this).parents(".dropdown");
        dd.find("dt a span").html(text);
        dd.find("dd ul").hide();

        $("#result").html("Selected value is: " + getSelectedValue("sample"));
    });

    function getSelectedValue(id) {
        return $("#" + id).find("dt a span.value").html();
    }

    $(document).bind('click', function(e) {
        var $clicked = $(e.target);
        if (! $clicked.parents().hasClass("dropdown"))
            $(".dropdown dd ul").hide();
    });


    $("#flagSwitcher").click(function() {
        $(".dropdown img.flag").toggleClass("flagvisibility");
    });
});

There was an error in the code, its corrected now. If you're trying this, use the new code or from the demo fiddle above. — techfoobar, Oct 01 '12 at 12:41
Absolute legend! Thanks a lot for that I'll give it a try :) — elmediano, Oct 01 '12 at 12:43

score 0 · Answer 3 · answered Oct 01 '12 at 12:25

0

The script basically takes the dropdown and shows the list element - $('#sample > dd > ul').show();

It is better if you give each select element a unique ID and then trigger the dropdown. This way, only the targeted element will be shown.

answered Oct 01 '12 at 12:25

automaticAllDramatic

2,025
1
21
25

Thanks for helping but please read my comment on the answer above. – elmediano Oct 01 '12 at 12:42

Toggle only one dropdown from multiple with same class

3 Answers3