CODEWITHSUNDEEP
jquery
CaptainMorgan
CaptainMorgan

Reputation: 1253

jQuery slideout from left toggle

I have the following code which I want to have a "Promotions" div on the left and when you click on it, it slides to the right showing a list of promotions. This works, however, when you click on the promotion_button div, the promotion_button div is quickly moved to the right, then the promotion_list div slides to the right and meets up with the promotion_button div. What do I need to do so the promotion_button div slides with the promotion_list div?

<script>
    jQuery(document).ready(function(){
        jQuery( ".promotion_button" ).click (function() {

            jQuery('.promotion_list').toggle('slide', {direction: 'right'}, 300);
        });
    });
</script>

<div class="promotion_wrapper" style="position:fixed;top:35%;left:0px;z-index:100;">
    <div class="promotion_list component-teaser-standard shadow" style="width: 253px; min-height:    260px; float: left; display: none;">
        Insert promo here.
    </div>
    <div class="promotion_button" style="background-image: url('/images/promotions_button.png');width:50px;height:174px;float:left;"></div>
</div>

Upvotes: 1

Views: 396

Answers (3)

Uiupdates
Uiupdates

Reputation: 196

Here is the exact code which you are looking for

<div class="promotion_wrapper" style="position:fixed;top:35%;left:0px;z-index:100;">
    <div class="promotion_list component-teaser-standard shadow" style="position:absolute;width: 253px; min-height: 260px; float: left; display: block;border:1px solid #000;">
        Insert promo here.
    </div>
    <div class="promotion_button" style="position:absolute;width:50px;height:174px;float:left;border:1px solid #dfdfdf;">button</div>
</div>

JS code :- 

<script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
<script>
    $(document).ready(function(){
        var width=$('.promotion_list').width();
        $('.promotion_list').css('left',-width);
        var rig=$('.promotion_list').position().left;
            $(".promotion_button").click(function() {
                var rig=$('.promotion_list').position().left;
                if(rig == 0 )
                {
                    $('.promotion_list').animate({left:-width}, 300);
                    $(".promotion_button").animate({left:'0px'}, 300);  
                }
                else
                {
                    $('.promotion_list').animate({left:'0px'}, 300);
                    $(".promotion_button").animate({left:width}, 300);
                }
            });
    });
</script>

check fiddle : - Demo

Upvotes: 2

Parth Akbari
Parth Akbari

Reputation: 651

Check this JSFiddle hope it will work for u

<div id="cat_icon">Menu</div>
<div id="categories">
  <div CLASS="panel_title">Categories</div>
  <div CLASS="panel_item">E1</div>
  <div CLASS="panel_item">E 2</div>
  <div CLASS="panel_item">E 3</div>
  <div CLASS="panel_item">E 4</div>
</div>

JS get from Above Link

Upvotes: 0

Aakash Jain
Aakash Jain

Reputation: 760

Shift the promotion_list to left making it invisible on load. Add the button to the promo div instead and make only that part of the div visible on screen without click event. When the user clicks the button, shift the div from left with the same margin you have initially used in negative to hide it. It will go something like this:

<div class="promotion_wrapper" style="position:fixed;top:35%;left:0px;z-index:100;">
    <div class="promotion_list component-teaser-standard shadow" style="width: 253px; min-height:    260px; float: left; margin-left:-200px;">
        Insert promo here.
       <div class="promotion_button" style="background-image: url('/images/promotions_button.png');width:50px;height:174px;float:left;"></div>

    </div>
</div>

<script>
    jQuery(document).ready(function(){
        jQuery( ".promotion_button" ).click (function() {

            jQuery('.promotion_list').toggle('slide', {direction: 'right'}, 200);
        });
    });
</script>

Upvotes: 0

Related Questions