jqueryelementname

Find element via parameterized css selector


I'm building a menu with jQuery with several hyperlink and what I want is to show / hide a div containing the sub menus when I click on the hyperlink.

I tried the following:

$("div#divmnu" + mnuidx).show();
$("div#divmnu" + mnuidx).animate({ height: '300px' }, 300);

But it doesn't work!

Can anyone help me?


Solution

  • This works:

    <html>
    <head>
    <title>JQuery Show/Hide w/ Animate</title>
    <script src="js/jquery-1.8.2.js"></script>
    <script src="js/jquery-ui.js"></script>
    <script>
        function show(button) {
            var idx = button.attr("id").substring(1);
            $("div#menu" + idx).show();
            $("div#menu" + idx).animate({ height: '300px' }, 300);
        }
        function hide(button) {
            var idx = button.attr("id").substring(1);
            $("div#menu" + idx).animate({ height: '20px' }, 300, "swing", function() { $("div#menu" + idx).hide(); });
        }
        $(document).ready(function() {
            $("div#menu1").hide();
            $("div#menu2").hide();
            $("#s1").click(function() { show($(this)); });
            $("#s2").click(function() { show($(this)); });
            $("#h1").click(function() { hide($(this)); });
            $("#h2").click(function() { hide($(this)); });
        });
    </script>
    </head>
    <body>
    <div id="menu1" style="font-size: xx-large;">Menu 1</div>
    <div id="menu2" style="font-size: xx-large;">Menu 2</div>
    <div><button id="s1">Show 1</button><button id="s2">Show 2</button>
         <button id="h1">Hide 1</button><button id="h2">Hide 2</button></div>
    </body>
    </html>