title: toggle + toggleClass
body: <p>Hello I am using toggle function in Jquery. There is a button which reveals content (this part work fine) I would like to add class when button is active.I think toggle class is what I need. So far I have </p>
  
  <p><div class="snippet" data-lang="js" data-hide="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>&lt; script type = "text/javascript" &gt;
    $(".left-menu-button").click(function() {
      var $that = $(this);
      $(".left-menu-content").toggle("slow", function() {
        $that.toggleClass(".left-menu-button-active");
      });
    });
  
  
  &lt; /script&gt;</code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code>.left-menu {
    margin-bottom: 5px;
    display: block;
    height: 100%;
    overflow: visible;
    position: absolute;
  }
  .left-menu-button {
    background: #00447f;
    width: 76px;
    height: 140px;
    display: inline-block;
    cursor: pointer;
    position: relative;
    z-index: 1000;
    color: #00447f;
    padding-top: 50px;
    margin-left: -3px;
  }
  .left-menu-content {
    margin-top: 2px;
    height: 186px;
    width: 295px;
    display: inline-block;
    background: green;
    position: relative!important;
    z-index: 100;
    display: none;
  }
  .left-menu-content section {
    width: 170px;
    margin: 0 auto;
  }
  .left-menu-button-active {
    background: #000;
    color: red;
    font-size: 100px;
    background: #00447f;
    width: 76px;
    height: 140px;
    display: inline-block;
    cursor: pointer;
    position: relative;
    z-index: 1000;
    color: #00447f;
    padding-top: 50px;
    margin-left: -3px;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;section class="left-menu"&gt;
    &lt;ul&gt;
      &lt;li&gt;
        &lt;span class="left-menu-content"&gt;    
                    &lt;section class=" updates-area left-menu-content"&gt;
                 &lt;h2&gt;&lt;a href="#"&gt;Latest News&lt;/a&gt;&lt;/h2&gt;
         &lt;span class="read-more text-center"&gt;
                     &lt;a href="#"&gt;Read more&lt;/a&gt;
                   &lt;/span&gt;
  
  &lt;/section&gt;{% endblock %}
  &lt;/span&gt;
  &lt;a class="left-menu-button icon-document93"&gt;News&lt;/a&gt;
  
  &lt;/li&gt;
  &lt;/ul&gt;
  &lt;/section&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>There is a content beneath that blue button. I cannot add class and toggle at the same time. Please help. .left-menu-button should change it's class on toggle and reveal content.</p>