Div select dropdown menu jquery toggle and option

Question

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?

Answer 1

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

Answer 2

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