title: Why isnt my .collapse("show") & .collapse("hide") working?
body: <p>I love the .collapse(&quot;hide&quot;) and collapse(&quot;show&quot;) function, because of the great interactive user experience feedback!</p>
  <p>Kindly help me understand why I am failing to get my HTML elements to toggle using the <code>.collapse(&quot;hide&quot;);</code> and <code>.collapse(&quot;show&quot;);</code> on my click event.</p>
  <p>Find below my HTML code:</p>
  <pre><code> &lt;div class=&quot;card weeklyGraph&quot; id=&quot;weeklyGraph&quot; &gt;
       &lt;div class=&quot;card-body&quot;&gt;
           &lt;h4 class=&quot;header-title mb-0&quot; data-toggle=&quot;collapse&quot;&gt;  Weekly Visits &lt;i class=&quot;mdi mdi-chevron-down&quot; &gt;&lt;/i&gt;&lt;/h4&gt;
              &lt;div class=&quot;dropdown-content&quot; id=&quot;invisible&quot;&gt;
                    &lt;a href=&quot;#&quot; id=&quot;monthlyVisits&quot; onclick=&quot;toggleToMonthlyVisits()&quot; &gt;Monthly Visits&lt;/a&gt;
              &lt;/div&gt;
           
           &lt;div id=&quot;cardCollpase&quot; class=&quot;collapse pt-3 show&quot;&gt;
               &lt;div class=&quot;text-center&quot;&gt;
                   &lt;div class=&quot;row mt-3&quot;&gt;
                       &lt;div class=&quot;col-4&quot;&gt;
                           &lt;p class=&quot;text-muted font-15 mb-1 text-truncate&quot;&gt;This Week&lt;/p&gt;
                           &lt;h4&gt;&lt;i data-feather=&quot;arrow-up&quot; class=&quot;text-success me-1 feather-16&quot; &gt;&lt;/i&gt; 5% &lt;/h4&gt;  
                       &lt;/div&gt;                                             
                      
                   &lt;/div&gt;
               &lt;/div&gt;
           &lt;/div&gt;
       &lt;/div&gt;
   &lt;/div&gt;
  </code></pre>
  <p>And now my <code>toggleToMonthlyVisits()</code> function:</p>
  <pre><code>function toggleToMonthlyVisits() {
      alert(&quot;You clicked on Monthly visits!&quot;);
  
      //Hide the weekly graph
      $('.weeklyGraph').collapse(&quot;hide&quot;);
      console.log(&quot;WeeklyGraph now hidden!&quot;)
  
      //Show the monthly graph
      $('.monthlyGraph').collapse(&quot;show&quot;);
      console.log(&quot;monthlyGraph now showing!&quot;)
  }
  </code></pre>
  <p>The click event triggers the <code>alert(&quot;You clicked on Monthly visits!&quot;);</code> pop up as expected, it also triggers the <code>console.log(&quot;WeeklyGraph now hidden!&quot;)</code> &amp; <code> console.log(&quot;monthlyGraph now showing!&quot;)</code>
  Unfortunatley the <code>weeklyGraph</code> card <strong>ISN'T</strong> affected by the  <code>$('.weeklyGraph').collapse(&quot;hide&quot;);</code> nor is the <code>$('.monthlyGraph').collapse(&quot;show&quot;);</code> affected either!</p>
  <p>But I noticed, that when I run the following code in the browser console <strong>twice</strong>, the <code>weeklyGraph</code> card is hidden, and the <code>monthlyGraph</code> card shows.</p>
  <pre><code>$('.weeklyGraph').collapse(&quot;show&quot;);
  $('.weeklyGraph').collapse(&quot;hide&quot;);
  $('.monthlyGraph').collapse(&quot;show&quot;);
  </code></pre>
  <p>Can someone explain to me why this is happening?</p>
  <p>And now for my <code>monthlyGraph</code> code:</p>
  <pre><code> &lt;div class=&quot;card monthlyGraph&quot; id=&quot;monthlyGraph&quot; &gt;
       &lt;div class=&quot;card-body&quot;&gt;
           &lt;h4 class=&quot;header-title mb-0&quot; data-toggle=&quot;collapse&quot;&gt;  Weekly Visits &lt;i class=&quot;mdi mdi-chevron-down&quot; &gt;&lt;/i&gt;&lt;/h4&gt;
              &lt;div class=&quot;dropdown-content&quot; id=&quot;invisible&quot;&gt;
                    &lt;a href=&quot;#&quot; id=&quot;monthlyVisits&quot; onclick=&quot;toggleToWeeklyVisits()&quot; &gt;Monthly Visits&lt;/a&gt;
              &lt;/div&gt;
           
           &lt;div id=&quot;cardCollpase&quot; class=&quot;collapse pt-3 show&quot;&gt;
               &lt;div class=&quot;text-center&quot;&gt;
                   &lt;div class=&quot;row mt-3&quot;&gt;
                       &lt;div class=&quot;col-4&quot;&gt;
                           &lt;p class=&quot;text-muted font-15 mb-1 text-truncate&quot;&gt;This Week&lt;/p&gt;
                           &lt;h4&gt;&lt;i data-feather=&quot;arrow-up&quot; class=&quot;text-success me-1 feather-16&quot; &gt;&lt;/i&gt; 5% &lt;/h4&gt;  
                       &lt;/div&gt;                                             
                      
                   &lt;/div&gt;
               &lt;/div&gt;
           &lt;/div&gt;
       &lt;/div&gt;
   &lt;/div&gt;                 
  </code></pre>