Trying to open/close a div with the direction arrow changing on open and close but staying attached to the div as it closes and opens.
http://jsfiddle.net/siiimple/GqJj8/8/
Ideally I would like it to slide to the left as it closes (fast), then open to the right. The close "-" would change to "+" when it closed.
Thanks for any help :)
Departed from crowjonah's solution, and came up with something that I think is closer to your spec.
Check it out here:
First, restructured the divs a little so that the expand/contract buttons is a peer of the sliding div; so that it stays atatched to it during the transition:
<div id="intro-wrap">
<div class="open-intro">+</div>
<div class="close-intro">-</div>
<div id="contentWrap">
<h1 class="main-header">Here is a Title</h1>
<p class="main-desc">You can write whatever you want about yourself here. You can say you're a superhuman alien ant, arrived from the nether regions of Dwarf-Ant-Dom.</p>
</div>
Then refactored the CSS to: 1. make it a little simpler, 2: change around block, relative, float, and absolute so that the buttons are "pinned" to the relative div, and that's it:
#intro-wrap {
position: relative;
z-index: 1;
border-left: 25px solid rgba(0,0,0,.2);
width: 200px;
}
#contentWrap{
background: rgba(0,0,0,.8);
padding: 15px 40px 25px 30px;
}
#intro-wrap h1 {
font-family: "PT Sans Narrow";
font-size: 25px;
color: #fff;
font-weight: 700;
margin-bottom: 0px !important;
padding-bottom: 10px;
}
#intro-wrap p {
line-height: 19px;
color: #999;
}
.open-intro,
.close-intro {
position:absolute;
left:200px;
cursor: pointer;
width: 25px;
height: 25px;
z-index: 50;
padding-left:15px;
}
.open-intro {
display: none;
background: yellow
}
.close-intro {
background: red;
}
The only thing I changed in the js is that I disabled the opacity animation, but you could bring it back -- I just wouldn't target #intro-wrap with it, you should instead target contentWrap with it:
$('.open-intro').click(function() {
$('#intro-wrap').animate({
//opacity: 1,
left: '0',
}, 500, function() {
// Animation complete.
});
$('.open-intro').hide();
$('.close-intro').show();
});
$('.close-intro').click(function() {
$('#intro-wrap').animate({
//opacity: 0.25,
left: '-225',
}, 400, function() {
// Animation complete.
});
$('.open-intro').show();
$('.close-intro').hide();
});
J
http://jsfiddle.net/harmeet_jaipur/ETx7P/
You can do this easily by slideUp/slideDown.
or you can also try this :
I generally create a sprite sheet containing both up and down arrows and then have classes for each with different background positions. On toggle then just assign the arrow the class if it's open or closed.
Also the updated fiddle doesn't work at all for me.
An easy way to slide left and right is to use jQuery UI!
Just add <script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js"></script> right after jQuery itself and use the function as shown in this example (I forked Harmeets): http://jsfiddle.net/qEBnG/1/ (edit: even better: http://jsfiddle.net/qEBnG/2/)
Then just fill in the function call with your selector and parameters:
$('.open-button').click(function() {
$('#content').show("slide", { direction: "left" }, 500);
$('.open-button').hide();
$('.close-button').show();
});
$('.close-button').click(function() {
$('#content').hide("slide", { direction: "left" }, 100);
$('.open-button').show();
$('.close-button').hide();
});
You can modify the CSS a bit in order to have the + and - buttons replace each other if you so desire.
As pointed out by josh, you don't necessarily want to load the entire jQuery UI library just for one small use, in which case you can use jQuery's animate function. Here's a fiddle, and here's some code (to stick in the existing click function):
$('#content').animate({
opacity: 1,
left: '-900', //to close. use 0 to open
}, 500, function() {}); //500 is the speed. lower is quicker
