CODEWITHSUNDEEP
jquery
NinoLopezWeb
NinoLopezWeb

Reputation: 151

Show portion of toggle div, then click on portion to reveal entire div

I am using a 'toggle' slide effect and would like to show a portion of the div which the user can click to reveal the entire div. The problem with the solution I have now is that #click_here jumps left to right when 'toggle' is triggered. I would like to find a solution where #click_here gradually moves left to right with the slide animation when 'toggle' is triggered.

This my jQuery script so far:

$('#click_here').click(function() {
var effect = 'slide';
var options = { direction: 'left' };
var duration = 700;
$('#info_box').toggle(effect, options, duration);
     return false;
});

And this my html

<div id="wrap">
    <div id="click_here">
        <p>Click here!</p>
    </div>
    <div id="info_box">
        <h1>Here is some cool info!</h1>
    </div>
</div>

and the css

#wrap { background:gray; width:400px; margin:0 auto; height:300px; border:5px blue solid; }

#info_box { width:300px; height:200px; background:pink; float:left; display:inline-block;  overflow:hidden; display:none; }

#click_here { width:100px; height:200px; float:left; background:yellow; display:inline-block; }

http://jsfiddle.net/NinoLopezWeb/92Xcm/1/

Thank you!

Upvotes: 1

Views: 142

Answers (1)

showdev
showdev

Reputation: 29168

It seems that the way jQuery UI slide toggle works is by inserting a wrapper around the element and animating the element's left position. However, the wrapper takes up the full width of the final element, so your "click button" immediately moves to the right. (See this SO post for a work-around.)

Instead of using that toggle effect, you could use jQuery's animate() to animate a CSS margin.

#wrap {
    ...
    overflow:hidden;     /* hide overflowing content */
}

#info_box {
    width:300px;
    height:200px;
    background:pink;
    float:left;
    display:inline-block;
    margin-left:-300px;      /* move the element out of sight
}

Then use your click handler to animate the margin-left back to "0px":

$('#click_here').click(function () {
    var duration = 700;
    $('#info_box').animate({
        'margin-left':'0px'
    },duration);
    return false;
});

WORKING EXAMPLE (jsfiddle)

Edit:

Another method is to use let CSS handle the animation and just use jQuery to toggle a class:

#info_box {
    width:300px;
    height:200px;
    background:pink;
    float:left;
    display:inline-block;
    margin-left:-300px;

    -webkit-transition-duration:.7s;
    -moz-transition-duration:.7s;
    -ms-transition-duration:.7s;
    -o-transition-duration:.7s;
    transition-duration:.7s;
}

#info_box.show {
    margin-left:0px;
}

Then just toggle the "show" class with jQuery:

$('#click_here').click(function () {
    $('#info_box').toggleClass('show');
    return false;
});

Please note the browser compatibility of CSS transitions.

WORKING EXAMPLE (jsfiddle)

Upvotes: 1

Related Questions