CODEWITHSUNDEEP
jqueryhtmlcssslide
vemund
vemund

Reputation: 1807

Slide in from left toggle

I'm trying to create this slide in from right menu in my Shopify store. I can open and close the div with the use of slideToggle(), but when I try to add some other features or effects, it simply wont work.

I have tried something like this aswell: 

.toggle('slide', direction: 'right', 500)

Also, I would like the hide function to work if you click outside the #sign div. Anybody know a feature that enables me to do that? 

<script type="text/javascript"> 
$(document).ready(function(){

    $("#sign").hide();
    $(".login-show1").show();

    $('.login-show1').click(function(){
        $("#sign").slideToggle();
    });

});

</script>

<a class="login-show1">SIGN IN</a>
<div id="sign">
   <div id="exit" href="#" class="login-show1">x</div>
   Here is sign in form
</div>

Upvotes: 1

Views: 1130

Answers (2)

kums
kums

Reputation: 2701

For the below code to work, you must include jQuery UI

<script src="//code.jquery.com/ui/1.11.1/jquery-ui.min.js"></script>

Change your script to:

$(document).ready(function(){

    $("#sign").hide();
    $(".login-show1").show();


    $(".login-show1").on("click", function() {
        var slided = false;

        $(document).on('click', function(){
            $('#sign').toggle('slide', {direction:'left'}, 700);
            slided = !slided;
            if(!slided) {
                $(document).off('click');
            }
        });

    });

});

Upvotes: 2

poashoas
poashoas

Reputation: 1894

$('.login-show1').click(function(){
    $('#myDiv').toggle('slide', {direction : right}, 500, function () {
        // callback when animation completed, add other effect here
    });
});

$('#myDiv').click(function(e){
    e.stopPropagation();
});

$('body').click(function(){
    /* 
    hide $('#myDiv') with:
    - $('myDiv').hide()
    or
    - $('#myDiv').toggle('slide', {direction : left})
    */
});

Upvotes: 1

Related Questions