Содержимое с вкладками с помощью jQuery: Показать все вкладки одновременно?

Question

Я использую jQuery для размещения контента на нескольких вкладках. В настоящее время он отлично работает по своему назначению, чтобы показать конкретный <div> при нажатии на вкладку. Как я могу создать кнопку, которая могла бы переключать «Показать все содержимое вкладки»? Скажем, кнопка будет выглядеть следующим образом: <div class="toggle"></div>

Текущий код:

/* 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; 
     } 

Answer 1

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 All 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'); 
     } 
    }); 
}); 

Answer 2

Мы ставим выбранную вкладку в LocalStorage, то сделал это в нашем конструкторе закладках:

create: function(event, ui) { 
    // manage the use of "Display All" selection 
    if (activeTab == "view_all") { // find value of activeTab before doing .tabs() 
     // set all panels visible 
     $('.ui-tabs-panel').show(); 
     // clear currently active tab's status 
     ui.tab.removeClass('ui-tabs-active ui-state-active'); 
     // set state of "view all" tab control (list element) to selected 
     $("#tabs ul>li").last().addClass('ui-tabs-active ui-state-active'); 
    } 
    else { 
     // un-select the 'view all' element 
     $("#tabs ul>li").last().removeClass('ui-tabs-active ui-state-active'); 
    }; 
}, 

Затем в методе АКТИВИРУЙТЕ:

activate: function(event, ui) { 
    if (ui.newTab[0].hasAttribute("data-id") && 
     ui.newTab[0].getAttributeNode('data-id').value == "view_all") { 
     // this is the "View All" tab, so show all panel sections 
     $('.ui-tabs-panel').show(); 
     window.localStorage.setItem("#tabs-panel", "view_all"); 
    } 
    else if (window.localStorage) { 
     if (ui.newPanel) { 
      // store panel by ID (or value of your choice) 
      window.localStorage.setItem("#tabs-panel", ui.newPanel.attr('id')); 
      // hide all panels except selected one (new for View All functionality) 
      $(".ui-tabs-panel[id!='"+ui.newPanel.attr('id')+"']").hide(); 
     } 
     else if (window.localStorage.getItem("#tabs-panel") == "view_all") { 
      $('.ui-tabs-panel').show(); 
     } 
    } 
}