Открытый аккордеон при нагрузке с активным классом

Question

У меня есть аккордеон на моем сайте, и я хотел бы, чтобы аккордеон был открыт на нужном уровне в зависимости от того, где находится активный класс. Я сделал JSFiddle.

JS:

$(document).ready(function ($) { 
$('.servicesub').find('.servicesubitem').click(function() { 

    if ($(this).next().is(':visible')) { 
     //Collapse 
     $(this).next().slideToggle('fast'); 
     $(this).removeClass('active'); 

     // $("#footer-wrapper").animate({marginTop: "0px"}, 'fast'); 
    } else { 
     //Expand 
     $(this).next().slideToggle('fast'); 
     $(this).siblings().removeClass('active'); 
     $(this).addClass('active'); 

     //hide other panels 
     $(".servicesubli").not($(this).next()).slideUp('fast'); 

     //$("#footer-wrapper").animate({marginTop: "200px"}, 'fast'); 

    } 

}); 




}); 

HTML:

<div class="col-xs-12 col-md-3 col-lg-3 servicesub" id="servicesub" > 
<li class="servicesubitem active"> 
          <span class="subitem">Web Design, 
           <br> 
           Multimedia &amp; Email</span><span class="fa1 fa-globe"> </span> 
         </li> 
         <div class="servicesubli"> 
          <ul> 
           <a href="domains.php"> 
           <li> 
            Domain Registration 
           </li> 
           </a> 
           <a href="webdesign.php"> 
           <li> 
            Web Design &amp; Development 
           </li> 
           </a> 
           <a href="webhosting.php"> 
           <li> 
            Web Hosting 
           </li> 
           </a> 
           <a href="email.php"> 
           <li> 
            Managed Email Systems 
           </li> 
           </a> 
          </ul> 
         </div> 
         <li class="servicesubitem"> 
          <span class="subitem">Vessel 
           <br> 
           Security</span><span class="fa1 fa-lock"> </span> 
         </li> 
         <div class="servicesubli"> 
          <ul> 
           <a href="tracking.php"> 
           <li> 
            Yacht Tracking 
           </li> 
           </a> 
           <a href="ssas.php"> 
           <li> 
            SSAS 
           </li> 
           </a> 
           <a href="#"> 
           <li> 
            SAT C 
           </li> 
           </a> 
          </ul> 
         </div> 
          </div> 

CSS:

* Service Sub */ 
.servicesub { padding:10px; } 
.servicesub ul { list-style-type: none; padding: 0px; color: #fff;} 
.servicesub li{ font-size: 14px; height: 70px; padding: 17px 0px 10px 20px; margin-top: 10px; text-transform: uppercase; } 
.servicesub li a {text-decoration: none;} 
.servicesub li a:hover {color:#fff;} 
.servicesub li { background-color: #017CEB; } 
.servicesub li:hover { background-color: #015BAC; } 
.servicesub li.active { background-color: #015BAC; } 
.servicesub span:after { color:#fff; font-family: FontAwesome; display: inline-block; width: 1.2em; font-size: 40px; position: absolute; text-align: center; margin-top: -9px; } 
#servicesub.stick { position: fixed; top: 80px; max-width: 293px; } 

.subitem { color:#fff; height:58px; width: 215px; position: absolute; right: 10px; text-align: center; } 
.servicesubitem { cursor: pointer; } 
.servicesubli { cursor: pointer; display: none; } 
.servicesubli.default { display: block; } 
.servicesubli ul { width: 100%; font-size: 14px;} 
.servicesubli li { padding: 8px; margin-top: 1px; text-transform: uppercase; height: 35px; text-align: center;} 
.servicesubli a { text-decoration: none; color: #fff; } 

.servicesub .getintouch { background-color: #00539f; padding: 10px; height: auto;} 
.servicesub .getintouch:hover { background-color: #00539f; } 
.servicesub .getintouch h3 { color: #fff; text-align: center; } 
.servicesub .getintouch p { color:#fff; text-align: center; } 

Как вы можете видеть на аккордеоне работает нажать на и активный класс (который устанавливается вручную для этой демонстрации) есть ли я просто так, чтобы правильная аккордеонная часть была переключена, когда страница загружена. Заранее спасибо.

Answer 1

Чтобы переработать свою логику, вы можете просто добавить свой класс .active в зависимости от того, какой элемент вам нужен, а затем выполнить поиск .servicesubli.active на готовом. Обратите внимание на следующее ...

<div class="servicesubli active"> 

---

$(function() { 

    [...] 

    $('.servicesubli.active').slideToggle('fast'); 
}); 

JSFiddle Link - демонстрационная

---

Per комментарии, если вы хотите, чтобы предназначаться от servicesubitem.active, просто изменить к следующему ...

$('.servicesubitem.active').next('.servicesubli').addClass('active').slideToggle('fast'); 

JSFiddle Link - демо - .servicesubitem.active селектор

Answer 2

Ну вам просто нужно, чтобы вызвать событие щелчка, как только страница загружена, как показано ниже:

$('.servicesub').find('.active').trigger("click"); 

Смотрите jsfiddle здесь: http://jsfiddle.net/beroza/a1mbgyqx/