Hi,
I am trying to make 3 tabs with sliding and fading DIVs.
My questions:
Is there any better way to make this?
How can I also fade when the slides are going up and down?
<!DOCTYPE html>
<html lang="en">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<style type="text/css">
.button { width: 200px; height: 50px; float:
left; cursor: hand; }
.content { width: 600px; }
a { color: black; }
#linkCategories { background: red; }
#linkTerms { background: blue; }
#linkDonate { background: yellow; }
#contentCategories { background: red; display: none; }
#contentTerms { background: blue; display: none; }
#contentDonate { background: yellow; display: none; }
.active { color: white; }
</style>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/
libs/jquery/1.3.2/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$("#linkCategories").click(function () {
if ($("#contentCategories").is(":hidden")) {
$("#contentCategories").slideDown();
$("#contentTerms").slideUp();
$("#contentDonate").slideUp();
} else {
$("#contentCategories").slideUp();
}
});
$("#linkTerms").click(function () {
if ($("#contentTerms").is(":hidden")) {
$("#contentTerms").slideDown();
$("#contentCategories").slideUp();
$("#contentDonate").slideUp();
} else {
$("#contentTerms").slideUp();
}
});
$("#linkDonate").click(function () {
if ($("#contentDonate").is(":hidden")) {
$("#contentDonate").slideDown();
$("#contentTerms").slideUp();
$("#contentCategories").slideUp();
} else {
$("#contentDonate").slideUp();
}
});
});
</script>
</head>
<body>
<div id="linkCategories" class="button">
<a href="#">Categories</a>
</div>
<div id="linkTerms" class="button">
<a href="#">Terms</a>
</div>
<div id="linkDonate" class="button">
<a href="#">Donate</a>
</div>
<div style="clear: both;" />
<h1>Some Content</h1>
<div id="contentCategories" class="content">
<h3>Categories</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer
ornare ornare nibh mattis ultricies. Ut libero tortor, lacinia vel
gravida ac, interdum suscipit quam. Cras tempor velit non nunc
ultricies vel porttitor lectus consectetur. Donec accumsan lectus a
enim gravida mattis. Quisque ornare gravida bibendum. Mauris
ullamcorper sodales elementum. Vestibulum augue purus, ornare non
consectetur in, aliquet quis mi. Donec vestibulum mi in nunc
pellentesque sed mattis leo adipiscing. Quisque quis ligula dapibus
nisi auctor ullamcorper vitae non neque. Nam convallis molestie leo ut
faucibus. </p>
</div>
<div id="contentTerms" class="content">
<h3>Terms</h3>
<p>Curabitur lorem quam, condimentum id posuere quis, sollicitudin
sit amet mauris. Nam eget odio ipsum, eu dapibus odio. Etiam non
placerat elit. Fusce a est id urna vehicula porttitor. Morbi volutpat
nisi vitae nibh posuere nec dignissim arcu lacinia. Duis vitae diam
nulla. Vestibulum ante ipsum primis in faucibus orci luctus et
ultrices posuere cubilia Curae; Vestibulum vitae lacus sit amet metus
lobortis fermentum. Cras semper, dui quis eleifend ullamcorper, lectus
ligula rhoncus neque, porta euismod lacus diam nec sem. Cras ac libero
sem. Praesent lorem lacus, mollis nec posuere faucibus, rutrum ut
ante. Nulla facilisis lobortis egestas. Duis molestie, erat a rhoncus
pellentesque, lectus nisi varius augue, sit amet dictum erat nunc
dictum turpis. Nullam ullamcorper viverra accumsan. Quisque non purus
nibh, id molestie tortor. Lorem ipsum dolor sit amet, consectetur
adipiscing elit. </p>
</div>
<div id="contentDonate" class="content">
<h3>Donate</h3>
<p>Maecenas non nulla sed libero vulputate facilisis id nec velit.
Suspendisse id est odio, pellentesque dictum nunc. Suspendisse
condimentum sem vitae nulla laoreet sollicitudin. Aliquam mollis
suscipit ultrices. Vivamus scelerisque interdum dui, in ornare nunc
mollis ac. Nunc facilisis elementum elit nec condimentum. Etiam vel
tortor at felis aliquet bibendum. Curabitur nunc odio, vulputate vitae
bibendum dictum, adipiscing sit amet ligula. Ut quis nulla vel enim
viverra volutpat sed faucibus turpis. Aliquam vitae felis vitae ipsum
adipiscing luctus eu nec enim.</p>
</div>
<h1>Some Content</h1>
</body>
</html>
