I'm facing a jquery issue and could use some assistance. I am trying to achieve the following:
- Add a class "active" to style tags when they are active.
- Slide up/down vertically within a div (#information - containing "About" and "Contact").
- Slide left/right horizontally between page divs (moving between "About" and "Contact").
- If either "About" or "Contact" is the active "page" and is displayed, clicking on "About" should close and slide up the #information wrapper.
Here is my progress so far: JSFiddle
HTML:
<div id="information">
<div id="info-about"></div>
<div id="info-contact"></div>
</div>
<ul>
<li><a id="about" class="page" href="#">About</a></li>
<li><a id="contact" class="page" href="#">Contact</a></li>
</ul>
CSS:
#information {
width: 200%;
height: 300px;
position: relative;
left: 0;
display: none;
}
#info-about {
width: 50%;
height: inherit;
background: red;
float: left;
}
#info-contact {
width: 50%;
height: inherit;
background: blue;
float: left;
}
jQuery:
$('li a').click(function(e) {
e.preventDefault();
$('a').removeClass('active');
$(this).addClass('active');
if ($(this).is('.page.active')) {
$('#information').slideDown('slow');
}
});
$('#about').click(function () {
$('#information').animate({
left: "0"
}, 1000);
});
$('#contact').click(function () {
$('#information').animate({
left: "-100%"
}, 1000);
});
If you can assist me with this, it would be greatly appreciated. Additionally, I am curious if it's possible to combine all these functionalities into one script rather than separate parts.
Thank you for your help!