Search code examples
jqueryonloadslide

how to slideout in checkbox

I have div box that slides-out when onLoad page, and when mouseover or hover it will slide-In which is working fine.

And now I'm trying to add new features, there is one checkbox if checked and not slide out or disable slideout. if not check, then auto slide out so enable.

as you can see id="checkbox" ... why is not working!

jsfiddle

HTML

<div class="sidebar-nav-right">                            
<ul class="nav nav-list accordion-group latest-group-sidebar">
<input name="" type="checkbox" id="mycheckbox" value="">                           
</ul>
</div>

jquery...

$(window).on("load", function() {    $(".sidebar-nav-right").animate({ "right": "-=150px" }, "fast" ); });

$(".sidebar-nav-right").hover(function () {
    $(".sidebar-nav-right").animate({ "right": "0px" }, "fast" ); }, function(){
     $(".sidebar-nav-right").animate({ "right": "-=150px" }, "fast" ); });

$("#mycheckbox").on('change', function () {
    $(".sidebar-nav-right").toggleClass("sidebar-nav-right"); });
Solution

  • You're using toggleClass wrong. toggleClass is meant to do just that toggle a class.

    http://api.jquery.com/toggleclass/

    But you're only using one class. The easiest way to do this would be to write CSS for the closed state and the open state with CSS animations. Then use toggleClass to add and remove that class on click.