CODEWITHSUNDEEP
javascriptjqueryhtml
Muhammad Kamran
Muhammad Kamran

Reputation: 561

How to open one drop down at one time?

This my code,

<dl id="sample" class="dropdown">
    <dt><a href="#"></a></dt>
    <dd>
        <ul>
            <li><a href="#">News</a></li>
            <li><a href="#">Jobs</a></li>
            <li><a href="#">Community</a></li>
            <li><a href="#">Events</a></li>
            <li><a href="#">Advisory</a></li>
            <li><a href="#">People</a></li>
            <li><a href="#">Universities</a></li>
            <li><a href="#">HR Intellegence</a></li>
            <li><a href="#">Companies</a></li>
            <li><a href="#">Inbox</a></li>
            <li><a href="#">Notifications</a></li>
        </ul>
    </dd>
</dl>

and here is my js..

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

$(".dropdown dt a").click(function() {
    $(".dropdown dd ul").toggle();
});

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

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");
    });
});

I am using this code for drop down. I want to use this multiple times in my code but the problem is that when I click on any one of the drop down it open all the drop downs in the page.. Please suggest something that will work for me.

Upvotes: 1

Views: 173

Answers (1)

Alaa Abuzaghleh
Alaa Abuzaghleh

Reputation: 1009

user #sample instead of .dropdown or add make a dummy class for what ever you need to be used in the code such as dropdown1 and use .dropdwon1 in the code

Upvotes: 3

Related Questions