Sliding Content
Sliding Content
Hello,
I worked on that probleme a coupls of hours now and can't solve it. Hopfefully some1 can help me.
What I already done is: on startup ther is no content (.hide) and just the urls. On click (.click) on a url the specific (.sbilings) content for this url slides out beneath the url (.fadeIn)
The Problem is: When I click on the next url the content of the first url should slide out (.slideOut) and the new specific content should slide out. But this doesn't work at all. The content of the first url doesn't slides out.
HTML-Doc:
- <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Content_Slider</title>
<link rel="stylesheet" type="text/css" href="css_slider_style.css" />
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.js" type="text/javascript"></script>
<script src="jscript_slider.js" type="text/javascript"></script>
</head>
<body>
<div id="wrap">
<ul id="main_link">
<li><a class="main_headline" href="#">Küche</a>
<ul class="main_content">
<li><p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</p></li>
</ul>
</li>
<li><a class="main_headline" href="#">Schlafzimmer</a>
<ul class="main_content">
<li><p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</p></li>
</ul>
</li>
</ul>
</div>
</body>
</html>
Script-Code:
- $('document').ready(function() {
$('.main_content').hide();
$('#main_link li a.main_headline').removeClass("active");
$('#main_link li a.main_headline').click(function(){
$(this).addClass("active");
$(this).siblings('.main_content').fadeIn();
});
});
$('#main_link li a.main_headlin').click(function() {
$('#main_link li a.main_headline').removeClass("active");
$('.main_content').fadeOut();
});
If u need futher information pls tell me.
Greetings,
Alex.