title: JQuery slideToggle shoult slideUp all the other shown container
body: <p>That's what sould happen:</p>
  
  <p>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.</p>
  
  <p>and that's how far i already am<br>
      </p>
  
  <pre><code>&lt;style&gt;
  
   .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;
    }
  
  
  &lt;/style&gt;
  &lt;/head&gt;
  
  &lt;body&gt;
  
  &lt;a class="read_more"&gt;BTN 1&lt;/a&gt;
  &lt;div class="inhalt"&gt;
   text 1
  &lt;/div&gt;
  
  &lt;ul&gt;
  &lt;li class="read_it"&gt;BTN 2&lt;/a&gt;&lt;/li&gt;
  &lt;li class="read_that"&gt;BTN 3&lt;/a&gt;&lt;/li&gt;
  &lt;li class="read_this"&gt;BTN 4&lt;/a&gt;&lt;/li&gt;
  &lt;/ul&gt;
  &lt;div class="inhalt_it"&gt;
   text 2
  &lt;/div&gt;
  &lt;div class="inhalt_that"&gt;
   text 3
  &lt;/div&gt;
  &lt;div class="inhalt_this"&gt;
   text 4
  &lt;/div&gt;
  
  
  &lt;script&gt;
       $('.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');
  
  
  
       });
  &lt;/script&gt;
  </code></pre>
  
  <p>I tryed to to fixed the order problem like this</p>
  
  <pre><code>        &lt;script&gt;
      //
          $('.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');
                  });
      //
               &lt;/script&gt;
  </code></pre>
  
  <p>How can I  achieve that?!?<br>
  I already say thanks for any help.....</p>
  
  <p>I made it may be not in the most ellegent way but it works....<br /> if any one could tell me how it can be improved i'll be very thank full...</p>
  
  <pre><code>&lt;script src="http://code.jquery.com/jquery-latest.min.js"&gt;&lt;/script&gt; 
  
  &lt;style&gt;
      .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;
              }
  
  
  &lt;/style&gt;
  
  &lt;/head&gt;
  
  &lt;body&gt;
  
  &lt;a class="read1"&gt;BTN1&lt;/a&gt;
      &lt;div class="inhalt"&gt;
          content.&lt;br /&gt;
      &lt;/div&gt;
      &lt;br /&gt;
  
  &lt;a class="inhalt_1"&gt;BTN2&lt;/a&gt;
  &lt;a class="inhalt_2"&gt;BTN3&lt;/a&gt;
  &lt;a class="inhalt_3"&gt;BTN4&lt;/a&gt;
  
  
  
      &lt;div class="inhalt1"&gt;
          Some content1.&lt;br /&gt;
      &lt;/div&gt;
  
      &lt;div class="inhalt2"&gt;
          Some content2.&lt;br /&gt;&lt;br /&gt;
      &lt;/div&gt;
  
      &lt;div class="inhalt3"&gt;
          Some content3.&lt;br /&gt;
      &lt;/div&gt;
  &lt;script&gt;
  
  $(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
  
  
  });
  
  &lt;/script&gt;
  </code></pre>