title: Use the same ID as the button's ID
body: <p>I've been trying to make it so that whenever I click inside of a div with 
  <code>id="slide$i"</code> that the clicked div should expand or collapse, depending on current form.</p>
  
  <p><strong>This a screenshot of how it looks like.</strong></p>
  
  <p><a href="https://i.stack.imgur.com/MCxoE.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/MCxoEm.png" alt="enter image description here"> </a></p>
  
  <p>So basically if I click in the area of the first div (From Magazijn To Guidion)
  it should expand and show additional information. But we'll keep it simple for now and just try to get the divs to move at all.</p>
  
  <p>My code is like this. </p>
  
  <pre><code>  $i = 0;
  foreach($stock_history as $history){
      echo " 
      &lt;div id='slide" . $i . "' &gt;
          &lt;p&gt;Date: &lt;strong&gt; " . $history-&gt;create_date . "&lt;/strong&gt; &lt;/p&gt; 
          &lt;p&gt;To: &lt;strong&gt; " . $history-&gt;toLocation-&gt;name . " &lt;/strong&gt; &lt;/p&gt; 
          &lt;p&gt;From: &lt;strong&gt; " . $history-&gt;fromLocation-&gt;name . " &lt;/strong&gt; &lt;/p&gt;
          &lt;p&gt;Moved by:  &lt;strong&gt; " .  $history-&gt;user-&gt;username . " &lt;/strong&gt; &lt;/p&gt;
          &lt;hr /&gt;
      &lt;/div&gt;";
      $i++;
  };
  </code></pre>
  
  <p><strong>Javascript:</strong></p>
  
  <pre><code>$("#slide'.$i.'").click(function(){
      if ($("#slide'.$i.'").is(":hidden")) {
          $("#slide'.$i.'").show("slow");
      } else {
          $("#slide'.$i.'").slideUp();
      }
  });
  </code></pre>
  
  <p><strong>Conclusion:</strong></p>
  
  <p>I want to click a div (id=1 for example) and THAT div should open/close. </p>