title: Tabbed content using jQuery: Show all tabs at once?
body: <p>I'm using jQuery to arrange content into several tabs. Currently it works great for its intended purpose to show a specific <code>&lt;div&gt;</code> when a tab is clicked. How would I be able to create a button that could toggle "Show all tab content"? Let's say the button would look like this: <code>&lt;div class="toggle"&gt;&lt;/div&gt;</code></p>
  
  <p>Current code:</p>
  
  <pre><code>/* jQuery */
  
      $('#hb_container div').click(function(){
          var tab_id = $(this).attr('data-tab');
          $('#hb_container div').removeClass('current');
          $('.tab-content').removeClass('current');
          $(this).addClass('current');
          $("#"+tab_id).addClass('current');
      });
  
  /* Tabs */
  
      &lt;div id="hb_container"&gt;
          &lt;div class="tab-link current" data-tab="tab-1"&gt;&lt;div class="tab-link-inner"&gt;Job&lt;br&gt;Info&lt;/div&gt;&lt;/div&gt;
          &lt;div class="tab-link" data-tab="tab-2"&gt;&lt;div class="tab-link-inner"&gt;Asb.&lt;br&gt;By&lt;/div&gt;&lt;/div&gt;
          &lt;div class="tab-link" data-tab="tab-3"&gt;&lt;div class="tab-link-inner"&gt;Apl.&lt;br&gt;No.&lt;/div&gt;&lt;/div&gt;
          &lt;div class="tab-link" data-tab="tab-4"&gt;&lt;div class="tab-link-inner"&gt;Struc.&lt;br&gt;Eng.&lt;/div&gt;&lt;/div&gt;
      &lt;/div&gt;
  
  /* Tabbed content */
  
  &lt;div id="tab-1" class="tab-content" style="margin-top: 24px"&gt;
      &lt;div class="tab-content-title"&gt;Attachment Upload&lt;/div&gt;
      &lt;div class="single_col_container"&gt;
          &lt;div id="frm_field_[id]_container" class="frm_form_field form-field [required_class][error_class]"&gt;
      [input]
          &lt;/div&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  
  /* CSS */
  
  #hb_container {
      margin: 8px 0 8px 8px;
      width: 984px;
      height: 54px;
  }
      .tab-content {
          display: none;
      }
  
      .tab-content.current {
          display: inherit;
      }
  
      .tab-link {
          background: #222;
          color: #ddd;
          cursor: pointer;
          float: left;
          font-family: Roboto;
          font-size: 12px;
          font-weight: bold;
          letter-spacing: 1px;
          line-height: 14px;
          margin: 0 8px 0 0;
          width: 54px !important;
          height: 54px;
      }
  
          .tab-link:hover {
              background: #181818;
              color: #ffcc00;
          }
  
          .tab-link-inner {
              margin-top: 11px;
          }
  </code></pre>