How to open one drop down at one time?

Question

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.

[**How does the “this” keyword work?**](http://stackoverflow.com/questions/3127429/how-does-the-this-keyword-work) — adeneo, May 23 '15 at 07:27
I dont know JS much. Just a starter. I know 'this' will do work but dnot know how t use it in code in my case\ — Muhammad Kamran, May 23 '15 at 07:29
@MianKamran: Can you show multiple dropdown html and respective CSS? It gives better understanding of the problem. If possible create **[JSFiddle](http://jsfiddle.net/)** to show the demo — Siva Charan, May 23 '15 at 07:54

Alaa Abuzaghleh · Accepted Answer · 2015-05-23T07:49:15.923

3

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

edited May 23 '15 at 07:49

answered May 23 '15 at 07:29

Alaa Abuzaghleh

1,003
6
11

so it means that if i have to creat 100 drop down i have to make 100 ids and copy code 100 times – Muhammad Kamran May 23 '15 at 07:45
other way you can add dummy class to it such as dropdown dropdown1 and use dropdown1 in the code that will work too – Alaa Abuzaghleh May 23 '15 at 07:47

How to open one drop down at one time?

1 Answers1