CODEWITHSUNDEEP
jquery
David Biga
David Biga

Reputation: 2801

fadeOut and fadeIn for dropdowns - JQuery

I am working on a project and I have multiple drop downs that are populated using PHP. Each dropdown is given an id of styleDrop and a container id of styleCont. Now for some reason, on the first dropdown, that is the only one that seems to be 'registered' with my code:

//this file is used for the styling dropdowns
$(document).ready(function () {
    //close opened dropdown and open one selected:
    $("#styleDrop").click(function(){
        var selected = $(this);
        $("#styleCont").fadeOut();
        selected.closest("#styleCont").fadeIn();
    });

});

What is suppose to happen:

User will click a drop down and if any other dropdown is open, it will close, while the one the user just selected opens. Also if they click outside the dropdown it will close.

The problem is this will not work on any of the other dropdowns and on the one it works with, it just makes it open and close right away.

I am not sure as to why this is. Thoughts? Ideas?

Upvotes: 0

Views: 92

Answers (2)

Matt
Matt

Reputation: 3233

IDs are supposed to be unique.

Your selector is finding the first one (by calling getElementById) and returning it.

Use a class instead and change your selector appropriately to use ".styleCont"

<select class="styleDrop" ... >

And then...

$(".styleDrop")

Upvotes: 2

msanford
msanford

Reputation: 12237

Each dropdown is given an id of styleDrop

That's why, ids must be unique for every element on a page, so your function only binds to the first one it finds in the DOM. Use a class instead (i.e., .styleDrop).

Upvotes: 0

Related Questions