title: How to make toggleClass jQuery work when elements are in separate divs?
body: <p>I am trying to create a show/hide toggle button using jQuery. It seems to work, until I close the div that the button is within, making the two elements in different divs.</p>
  
  <p>For example, the below works:</p>
  
  <pre><code>&lt;div class="col span_1_of_3"&gt;
      &lt;button class="reveal"&gt;Show Filters&lt;/button&gt;
  
      &lt;div class="filter-hide"&gt;
          &lt;p&gt;CONTENT&lt;/p&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>But this code does not:</p>
  
  <pre><code>&lt;div class="col span_1_of_3"&gt;
      &lt;button class="reveal"&gt;Show Filters&lt;/button&gt;
  &lt;/div&gt; &lt;!-- THIS CLOSING DIV HAS BEEN ADDED --&gt;
  
  &lt;div class="filter-hide"&gt;
      &lt;p&gt;CONTENT&lt;/p&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>JQuery is as follows:</p>
  
  <pre><code>$(".filter-hide").hide(); 
  $("button.reveal").click(function(){
      $(this).toggleClass("active").next().slideToggle();
  
      if ($.trim($(this).text()) === 'Show Filters') {
          $(this).text('Hide Filters');
      } else {
          $(this).text('Show Filters');        
      }
  
      return false; 
  });
  </code></pre>
  
  <p>Can anyone tell me why this is and how to fix it? The reason I am doing this is because I need the button to be 1/3 of the page and then the content to show full width below. I can work around it but then come across other problems.</p>
  
  <p>Thanks in advance.</p>