CODEWITHSUNDEEP
jquerycssselecttoggle
Matt
Matt

Reputation: 5095

Div select dropdown menu jquery toggle and option

I'm trying to make my dropdown menu work in jquery, but for some reason the .select div keeps fading away with this script when it loads.

<div class="select">Select your option</div>
<div class="dropdown">
    <ul>
        <li>Option 1</li>
        <li>Option 2</li>
        <li>Option 3</li>
        <li>Option 4</li>
        <li>Option 5</li>
    </ul>
</div>

And I've got this script here -

<script>
$(document).ready(function () {
    $(".select").toggle(function () {
        $(".dropdown").fadeIn("slow");
    },

    function () {
        $(".dropdown").fadeOut("slow");
    });
});
</script>

Anything I'm doing wrong?

Also - I'm trying to figure out how would I change the content of .select based on what they click from .dropdown ? Or what is the most efficient way?

Upvotes: 0

Views: 7329

Answers (2)

Tushar Gupta - curioustushar
Tushar Gupta - curioustushar

Reputation: 57105

Use .fadeToggle()

$(document).ready(function () {
    $(".select").click(function () {
        $(".dropdown").fadeToggle("slow");
    });
});

fiddle DEMO

Read

.toggle() Deprecated > Deprecated 1.8 and removed inn after 1.9.So you can not use it with 1.10

Deprecated Selector

Upvotes: 1

palaѕн
palaѕн

Reputation: 73896

You can do this:

$(document).ready(function () {
    $(".select").click(function () {
        $(".dropdown").fadeToggle("slow");
    });

    $('.dropdown li').click(function () {
        $(".select").text($(this).text());
    });
});

As, .toggle(function, function, ... ) is removed in jQuery 1.9 upgrade release

Demo: Fiddle

Upvotes: 1

Related Questions