That's what sould happen:
I click on one of the menue items, the text container should slide down when i klick on an other the already opened container slide up and the clickt container slide down. but how i tried "siblings" but that doesnt worked the way i want it to.
and that's how far i already am
<style>
.read_more, .read_it, .read_that, .read_this{
color: black;
font-size: 20px;
font-weight:bold;
}
.inhalt, .inhalt_it, .inhalt_this, .inhalt_that{
display:none;
}
li{
display: inline;
list-style-type: none;
}
</style>
</head>
<body>
<a class="read_more">BTN 1</a>
<div class="inhalt">
text 1
</div>
<ul>
<li class="read_it">BTN 2</a></li>
<li class="read_that">BTN 3</a></li>
<li class="read_this">BTN 4</a></li>
</ul>
<div class="inhalt_it">
text 2
</div>
<div class="inhalt_that">
text 3
</div>
<div class="inhalt_this">
text 4
</div>
<script>
$('.read_more').click(function() {
$(this).nextAll('div.inhalt:first').slideToggle("slow").siblings('div.inhalt_it, div.inhalt_that, div.inhalt_this').slideUp('slow').css('background', '#F00F');
});
$('li.read_it').click(function(){
$(this).nextAll('div.inhalt_it:first').slideToggle("slow").siblings('div.inhalt, div.inhalt_that, div.inhalt_this').slideUp('slow').css('background', 'Yellow');
});
$('li.read_this').click(function(){
$(this).nextAll('div.inhalt_this:first').slideToggle("slow").siblings('div.inhalt, div.inhalt_it, div.inhalt_that').slideUp('slow').css('background', 'Blue');
});
$('li.read_that').click(function(){
$(this).nextAll('div.inhalt_that:first').slideToggle("slow").siblings('div.inhalt, div.inhalt_it, div.inhalt_that, div.inhalt_this').slideUp('slow').css('background', 'Red');
});
</script>
I tryed to to fixed the order problem like this
<script>
//
$('.read_it').click(function(){
$(this).siblings('div.inhalt, div.inhalt_prozesse, div.inhalt_recht').slideUp('slow', function(){
$(this).nextAll('div.inhalt_it:first').slideToggle("slow").css('background', 'Yellow');
});
//
</script>
How can I achieve that?!?
I already say thanks for any help.....
I made it may be not in the most ellegent way but it works....
if any one could tell me how it can be improved i'll be very thank full...
<script src="http://code.jquery.com/jquery-latest.min.js"></script>
<style>
.inhalt, .inhalt1, .inhalt2, .inhalt3{
display: none;
}
.read1, .inhalt_1, .inhalt_2, .inhalt_3{
color: black;
font-size: 20px;
font-weight:bold;
}
ul{
display: inline;
list-style-type: none;
}
li{
display: inline;
}
</style>
</head>
<body>
<a class="read1">BTN1</a>
<div class="inhalt">
content.<br />
</div>
<br />
<a class="inhalt_1">BTN2</a>
<a class="inhalt_2">BTN3</a>
<a class="inhalt_3">BTN4</a>
<div class="inhalt1">
Some content1.<br />
</div>
<div class="inhalt2">
Some content2.<br /><br />
</div>
<div class="inhalt3">
Some content3.<br />
</div>
<script>
$(document).ready(function(){
// BTN 1 begin
$('.read1').click(function(){
if ($('div.inhalt1').css('display') == 'block'){
$('div.inhalt1').slideUp('slow', (function(){
$('div.inhalt').slideToggle('slow')
}))
}
else if($('div.inhalt2').css('display') == 'block'){
$('div.inhalt2').slideUp('slow', (function(){
$('div.inhalt').slideToggle('slow')
}))
}
else if($('div.inhalt3').css('display') == 'block'){
$('div.inhalt3').slideUp('slow', (function(){
$('div.inhalt').slideToggle('slow')
}))
}
else{
$(this).nextAll('div.inhalt:first').slideToggle('slow');
}
});
// BTN 1 end
// BTN 2 begin
$('.inhalt_1').click(function(){
if ($('div.inhalt').css('display') == 'block'){
$('div.inhalt').slideUp('slow', (function(){
$('div.inhalt1').slideToggle('slow')
}))
}
else if($('div.inhalt2').css('display') == 'block'){
$('div.inhalt2').slideUp('slow', (function(){
$('div.inhalt1').slideToggle('slow')
}))
}
else if($('div.inhalt3').css('display') == 'block'){
$('div.inhalt3').slideUp('slow', (function(){
$('div.inhalt1').slideToggle('slow')
}))
}
else{
$(this).nextAll('div.inhalt1:nth(0)').slideToggle('slow');
}
});
// BTN 2 end
// BTN 3 begin
$('.inhalt_2').click(function(){
if ($('div.inhalt').css('display') == 'block'){
$('div.inhalt').slideUp('slow', (function(){
$('div.inhalt2').slideToggle('slow')
}))
}
else if($('div.inhalt1').css('display') == 'block'){
$('div.inhalt1').slideUp('slow', (function(){
$('div.inhalt2').slideToggle('slow')
}))
}
else if($('div.inhalt3').css('display') == 'block'){
$('div.inhalt3').slideUp('slow', (function(){
$('div.inhalt2').slideToggle('slow')
}))
}
else {
$(this).nextAll('div.inhalt2:first').slideToggle('slow');
}
})
// BTN 3 end
// BTN 4 begin
$('.inhalt_3').click(function(){
if ($('div.inhalt').css('display') == 'block'){
$('div.inhalt').slideUp('slow', (function(){
$('div.inhalt3').slideToggle('slow')
}))
}
else if($('div.inhalt1').css('display') == 'block'){
$('div.inhalt1').slideUp('slow', (function(){
$('div.inhalt3').slideToggle('slow')
}))
}
else if($('div.inhalt2').css('display') == 'block'){
$('div.inhalt2').slideUp('slow', (function(){
$('div.inhalt3').slideToggle('slow')
}))
}
else {
$(this).nextAll('div.inhalt3:first').slideToggle('slow');
}
})
// BTN 4 end
});
</script>