I have a very basic function which I am using jQuery to slide some content either out (from left to right) or back in (from right to left). The code below works, however, what I am trying to do now is include the “+” at the end of my “overDiv”, and make it so that it will always show.
To paint a more lucid picture, right now if you paste that code into your editor and include google’s jQuery, you will see that clicking the “+” eliminates the “overDiv” block completely. However, what I want to do is place the “+” at the end of the “overDiv” block so that when the text ‘disappears’ off of the page, the + will always remain. Hopefully that makes some sense?
Thanks in advance.
<body>
<script language="javascript" type="text/javascript">
$(function() {
// when we click on the a-href id 'togglen', we move the overDiv to the left.
$('#togglen').click(function() {
// simple animation
$('#overDiv').animate({
left: parseInt($('#overDiv').css('left'),10) == 0 ? -$('#overDiv').outerWidth() : 0
});
}); //
});
</script>
<div><a href="#" id="togglen">+</a></div>
<div style="background-color:#CCC; width:180px; position:absolute; left:0; overflow:hidden; float:left;" id="overDiv">Lorem ipsum.</div>
http://jsfiddle.net/KmmbK/ I pasted your code into a jsfiddle. Looks like the ‘+’ does always remain. Do you want the ‘+’ inside the disappearing div? If so simply subtract the width of the ‘+’ from the distance the div animates off screen.