javascript - Tabbed content using jQuery: Show all tabs at once? -

i'm using jquery arrange content several tabs. works great intended purpose show specific <div> when tab clicked. how able create button toggle "show tab content"? let's button this: <div class="toggle"></div>

current 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 */      <div id="hb_container">         <div class="tab-link current" data-tab="tab-1"><div class="tab-link-inner">job<br>info</div></div>         <div class="tab-link" data-tab="tab-2"><div class="tab-link-inner">asb.<br>by</div></div>         <div class="tab-link" data-tab="tab-3"><div class="tab-link-inner">apl.<br>no.</div></div>         <div class="tab-link" data-tab="tab-4"><div class="tab-link-inner">struc.<br>eng.</div></div>     </div>  /* tabbed content */  <div id="tab-1" class="tab-content" style="margin-top: 24px">     <div class="tab-content-title">attachment upload</div>     <div class="single_col_container">         <div id="frm_field_[id]_container" class="frm_form_field form-field [required_class][error_class]">     [input]         </div>     </div> </div>  /* 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;         } 

jsfiddle

html

    <div id="hb_container">         <div class="tab-link current active" data-tab="tab-1"><div class="tab-link-inner">job<br>info</div></div>         <div class="tab-link" data-tab="tab-2"><div class="tab-link-inner">asb.<br>by</div></div>         <div class="tab-link" data-tab="tab-3"><div class="tab-link-inner">apl.<br>no.</div></div>         <div class="tab-link" data-tab="tab-4"><div class="tab-link-inner">struc.<br>eng.</div></div>     </div>     <input type="button" value="toggle tabs" class="toggle_tabs" /> 

jquery

$('#hb_container div.tab-link').click(function () {     var tab_id = $(this).data('tab');     $('#hb_container div').removeclass('current');     $('.tab-content').removeclass('current').removeclass('active');     $(this).addclass('current');     $("#" + tab_id).addclass('current').addclass('active'); }); $('.toggle_tabs').click(function () {     $('.tab-content').each(function () {         if ( ($(this).hasclass('current')) && ( $(this).hasclass('active') === false) ) {             $(this).removeclass('current');         } else {             $(this).addclass('current');         }     }); });