title: Trying to use jquery .slideDown() with multiple classes
body: <p>I am trying to use .slideDown() with multiple classes, but i want only one at a time to toggle/dropdown!
  Because if i run my code currently and i press the button, it will make them all show, instead of only the one i want to show!
  How can i do that?
  <br>my html:</p>
  
  <pre><code>    &lt;!doctype HTML&gt;
  &lt;head&gt;
      &lt;title&gt;Ricoz.co.uk Rp Directory&lt;/title&gt;
      &lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"&gt;&lt;/script&gt;
      &lt;script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/jquery-ui.min.js"&gt;&lt;/script&gt;
      &lt;script rel="text/javascript" src="js/script.js"&gt;&lt;/script&gt;
      &lt;link rel="stylesheet" type="text/css" href="css/stylesheet.css"&gt;
  &lt;/head&gt;
  &lt;body&gt;
      &lt;div class="navbar"&gt;&lt;/div&gt;
      &lt;div class="char"&gt;
      &lt;div class="picture"&gt;&lt;/div&gt;
      &lt;div class="text"&gt;
      here is some text!&lt;/div&gt;
      &lt;button&gt;test&lt;/button&gt;
      &lt;/div&gt;
      &lt;div class="char"&gt;
      &lt;div class="picture"&gt;&lt;/div&gt;
      &lt;div class="text"&gt;
      here is some text!&lt;/div&gt;
      &lt;button&gt;test&lt;/button&gt;
      &lt;/div&gt;
  
  
  &lt;/body&gt;
  </code></pre>
  
  <p><br>My Css:</p>
  
  <pre><code>body{
      background-image: url(tb.jpg);
      margin-top: 0px;
      margin-right: 0px;
      margin-bottom: 0px;
      margin-left: 0px
  }
  .navbar{
      border: 1px solid black;
      height: 50px;
  }
  .row{
      height: 440px;
  
  }
  .char{
  /*  border-radius: 20px; */
      background-color: white;
      width: 200px; 
      margin: 20px;
      float: left;
  
  }
  .char  &gt; .picture{
      width:200px;
      height: 200px;
      border: 1px solid black;
      border-radius: 200px;
  }
  .text{
      width:200px;
      height: 150px;
  }
  </code></pre>
  
  <p><br> JavaScript/JQuery:</p>
  
  <pre><code>$(document).ready(function(){
      $('.text').hide();
      $(this).click(function(){
          $('.text').slideToggle();
  
      });
  });
  </code></pre>
  
  <p><br> Thank you for your time!</p>