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

Popular posts from this blog

javascript - RequestAnimationFrame not working when exiting fullscreen switching space on Safari -

Python ctypes access violation with const pointer arguments -