javascript - Why doesn't the toggle toggle? -
newb here attempting learn how work jquery way of investigating 'the toggle'
i have simple html page , thought second link load collapsed/hidden , when clicked reveal it's contents, not. instead displays screen inner html exposed (hope i'm using terms correctly). believe happening jquery not loading, thats best guess of hobbyist, out there can me work.
<html> <head> <script src="http://code.jquery.com/jquery-1.8.3.min.js"></script> <script> $.fn.slidefadetoggle = function(speed, easing, callback) { return this.animate({ opacity: 'toggle', height: 'toggle' }, speed, easing, callback); }; // collapse first menu: $("#accordionmenu li a").not(":first").find("+ ul").slideup(1); // expand or collapse: $("#accordionmenu li a").click(function() { $(this).find("+ ul").slidefadetoggle("500"); }); </script> </head> <body> <div id="firstdiv"> <div id="seconddiv"> <ul id="accordionmenu"> <li><a href="#">menu item</a></li> <li><a href="#">menu item</a> <ul> <li><a href="#">suboption 1</a></li> <li><a href="#">submenu expandable</a> <ul> <li><a href="#">suboption 1</a></li> <li><a href="#">suboption 2</a></li> </ul> </li> </ul> </li> </ul> </div> </div> </body>
your code need in dom ready handler. in case trying add event handler target elements before elements loaded in dom, handlers not registered.
//dom ready handler jquery(function ($) { $.fn.slidefadetoggle = function (speed, easing, callback) { return this.animate({ opacity: 'toggle', height: 'toggle' }, speed, easing, callback); }; // collapse first menu: $("#accordionmenu li a").not(":first").find("+ ul").slideup(1); // expand or collapse: $("#accordionmenu li a").click(function () { //use .next() here $(this).next("ul").slidefadetoggle("500"); }); })
demo: fiddle
Comments
Post a Comment