CODEWITHSUNDEEP
javascriptjquery
manoji stack
manoji stack

Reputation: 739

Issue in opening two dropdown at same time

Here id dropdown fiddle http://jsfiddle.net/ym8t7Lhj/

The issue i am facing is i am having two dropdowns, if i click on one dropdown another dropdown is also opening. Can any one help me out in this.

Script

        $(document).ready(function() {
        $(".dropdown dt a").click(function() {
        $(this).toggleClass("myclass"); 
         $(".dropdown dd ul").toggle();
         });

        $(".dropdown dd ul li a").click(function() {

            var text = $(this).html();
            $('.dropdown dt a').toggleClass('myclass');
            $(".dropdown dt a span").html(text);
            $(".dropdown dd ul").hide();
            $("#result").html("Selected value is: " + getSelectedValue("sample"));
        });      
    });

Upvotes: 1

Views: 485

Answers (5)

Honey Goyal
Honey Goyal

Reputation: 445

Try this

$(document).ready(function() {
 $(".dropdown dt a").click(function() {
        $(this).toggleClass("myclass"); 
         $(this).closest('dl').find('ul').toggle();
 });

 $(".dropdown dd ul li a").click(function() {

            var text = $(this).html();
             $(this).closest('dl').find('dt a').toggleClass('myclass').find('span').html(text);

            $(this).closest('ul').hide();
            $("#result").html("Selected value is: " + getSelectedValue("sample"));
  });      
});

Upvotes: 1

Anoop Joshi P
Anoop Joshi P

Reputation: 25527

Change your code like this,

$(document).ready(function() {
    $(".dropdown dt a").click(function() {
        $(this).toggleClass("myclass");
        $(this).closest(".dropdown").find("dd ul").toggle();
    });

    $(".dropdown dd ul li a").click(function() {
        var text = $(this).html();
        var parent = $(this).closest(".dropdown");
        parent.find("dd ul").toggle();
        parent.find('dt a').toggleClass('myclass');
        parent.find("dt a span").html(text);
        parent.find('dt ul').hide();
        $("#result").html("Selected value is: " + getSelectedValue("sample"));
    });
});

Note: Toggle the elements with respect to the clicked element.

Updated Fiddle

Upvotes: 3

Xmindz
Xmindz

Reputation: 1282

Replace the (".dropdown dd ul").toggle(); with the following:

$(this).parent().next().find("ul").toggle();

Full code:

       $(document).ready(function() {
          $(".dropdown dt a").click(function() {
             $(this).toggleClass("myclass");    
             $(this).parent().next().find("ul").toggle();
          });

            $(".dropdown dd ul li a").click(function() {

                var text = $(this).html();
                var thisRoot = $(this).closest('.dropdown');
                thisRoot.find('dt a').toggleClass('myclass');
                thisRoot.find("dt a span").html(text);
                thisRoot.find("dd ul").hide();
                $("#result").html("Selected value is: " + getSelectedValue("sample"));
            });      
        });

Upvotes: 0

Parth Trivedi
Parth Trivedi

Reputation: 3832

Don't use ID for each. Only you have to remember to access onclick element via $(this)

So it will Only give you the element only..Not other with this same Class.

Upvotes: 0

A dev
A dev

Reputation: 948

You are using same selector for both drop down. Try adding ID on them then use $('dropdown1') and $('dropdown2')

[Working Code][1]


  [1]: http://jsfiddle.net/ym8t7Lhj/5/

Upvotes: 0

Related Questions