javascript - toggle() accordion script not working -
i've run roadblock , can't seem wrap head around why script not run on test page. have jquery linked, followed script. script know not js conflict. fiddle here: http://jsfiddle.net/dxway/7
var content = $('.content').hide(); $('.togglebtn').on('click', function() { $(this).next('.content').slidetoggle(); return false; }); .togglebtn { background:deepskyblue; display:block; float:left; width:100%; padding:10px; border-bottom:1px solid #ccc; border-top:1px solid #fff; color:#fff; cursor:pointer; } .content { background:skyblue; float:left; overflow:hidden; width:100%; padding:10px; } <a class="togglebtn">click me!</a> <div class="content">lorem ipsum dolor sit amet, consectetur adipisicing elit. inventore accusamus porro modi ut itaque ipsum natus explicabo vero sequi beatae libero voluptatibus sit culpa debitis tempore! sint eum ipsum consequatur!</div>
your problem (on live example) you're running js script you've written (in head section) before dom loaded.
a simple fix make script run after document ready. can achieve entering document.ready()
<script> $(document).ready(function () { var content = $('.content').hide(); $('.togglebtn').on('click', function() { $(this).next('.content').slidetoggle(); return false; }); }); </script>
Comments
Post a Comment