Как обеспечить, чтобы вкладка аккордеона была открыта во все времена, но только одна сразу

Question

Я довольно новичок в коде (также новичок в stackoverflow, поэтому извиняюсь, если формат этого вопроса немного некорректен, я просто получаю моя голова вокруг него). У меня есть аккордеон, который почти работает по назначению. Он имеет только две вкладки, и когда открыта другая вкладка, текущий закрывается, что является правильным. Тем не менее, я хочу, чтобы одна из вкладок была открыта во все времена, а также по умолчанию, когда страница загружается, поэтому, когда страница загружает первую вкладку, она уже открыта. Если я нажму на второй, тогда первый закроется, а второй откроется. Если я снова нажму на второй, он останется открытым, так как каждый должен быть открыт в любое время. В минуту, при загрузке страницы они оба сбрасываются и могут быть свернуты, если вы нажмете на текущую открытую вкладку. Ниже мой код.

$(document).ready(function() { 
 
    function close_accordion_section() { 
 
    $('.accordion .accordion-section-title').removeClass('active'); 
 
    $('.accordion .accordion-section-content').slideUp(300).removeClass('open'); 
 
    } 
 

 
    $('.accordion-section-title').click(function(e) { 
 
    var currentAttrValue = $(this).attr('href'); 
 

 
    if ($(e.target).is('.active')) { 
 
     close_accordion_section(); 
 
    } else { 
 
     close_accordion_section(); 
 
     $(this).addClass('active'); 
 
     $('.accordion ' + currentAttrValue).slideDown(300).addClass('open'); 
 
    } 
 

 
    e.preventDefault(); 
 
    }); 
 
});

.accordion, 
 
.accordion * { 
 
    -webkit-box-sizing: border-box; 
 
    -moz-box-sizing: border-box; 
 
    box-sizing: border-box; 
 
} 
 

 
.accordion { 
 
    overflow: hidden; 
 
    border-radius: 5px; 
 
    background: white; 
 
} 
 

 
.accordion-section-title { 
 
    width: 100%; 
 
    padding: 0px; 
 
    display: inline-block; 
 
    background: #585858; 
 
    transition: all linear 0.15s; 
 
    font-size: 14px; 
 
    color: #F2F2F2; 
 
} 
 

 
.accordion-section-title.active, 
 
.accordion-section-title:hover { 
 
    background: white; 
 
    text-decoration: none; 
 
    font-weight: bold; 
 
    color: #585858; 
 
} 
 

 
.accordion-section:last-child .accordion-section-title { 
 
    border-bottom: none; 
 
} 
 

 
.accordion-section-content { 
 
    padding: 0px; 
 
    display: none; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="accordion"> 
 
    <div class="accordion-section"> 
 
    <a class="accordion-section-title" href="#accordion-1">Accordion Section #1</a> 
 

 
    <div id="accordion-1" class="accordion-section-content"> 
 
     <p>accordion 1 text</p> 
 
    </div> 
 
    </div> 
 
</div> 
 

 
<div class="accordion"> 
 
    <div class="accordion-section"> 
 
    <a class="accordion-section-title" href="#accordion-2">Accordion Section #2</a> 
 

 
    <div id="accordion-2" class="accordion-section-content"> 
 
     <p>accordion 2 text</p> 
 
    </div> 
 
    </div> 
 
</div>

Спасибо заранее!

Answer 1

Когда документ готов, добавьте «открытый» и «активный» к первым элементам «.accordion-section-content» и «.accordion-section-title» соответственно. Не называть функцию «close_accordion_section()», если щелкнуть «.accordion-section-title» уже имеет «активный» класс.

$(document).ready(function() { 
 
    $($('.accordion .accordion-section-title')[0]).addClass('active'); 
 
    $($('.accordion .accordion-section-content')[0]).slideDown().addClass('open'); 
 

 
    function close_accordion_section() { 
 
     $('.accordion .accordion-section-title').removeClass('active'); 
 
     $('.accordion .accordion-section-content').slideUp(300).removeClass('open'); 
 
    } 
 

 
    $('.accordion-section-title').click(function (e) { 
 
     var currentAttrValue = $(this).attr('href'); 
 

 
     if ($(e.target).is('.active')) { 
 
      //close_accordion_section(); 
 
     } else { 
 
      close_accordion_section(); 
 
      $(this).addClass('active'); 
 
      $('.accordion ' + currentAttrValue).slideDown(300).addClass('open'); 
 
     } 
 

 
     e.preventDefault(); 
 
    }); 
 
});

.accordion, 
 
.accordion * { 
 
    -webkit-box-sizing: border-box; 
 
    -moz-box-sizing: border-box; 
 
    box-sizing: border-box; 
 
} 
 

 
.accordion { 
 
    overflow: hidden; 
 
    border-radius: 5px; 
 
    background: white; 
 
} 
 

 
.accordion-section-title { 
 
    width: 100%; 
 
    padding: 0px; 
 
    display: inline-block; 
 
    background: #585858; 
 
    transition: all linear 0.15s; 
 
    font-size: 14px; 
 
    color: #F2F2F2; 
 
} 
 

 
.accordion-section-title.active, 
 
.accordion-section-title:hover { 
 
    background: white; 
 
    text-decoration: none; 
 
    font-weight: bold; 
 
    color: #585858; 
 
} 
 

 
.accordion-section:last-child .accordion-section-title { 
 
    border-bottom: none; 
 
} 
 

 
.accordion-section-content { 
 
    padding: 0px; 
 
    display: none; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="accordion"> 
 
    <div class="accordion-section"> 
 
    <a class="accordion-section-title" href="#accordion-1">Accordion Section #1</a> 
 

 
    <div id="accordion-1" class="accordion-section-content"> 
 
     <p>accordion 1 text</p> 
 
    </div> 
 
    </div> 
 
</div> 
 

 
<div class="accordion"> 
 
    <div class="accordion-section"> 
 
    <a class="accordion-section-title" href="#accordion-2">Accordion Section #2</a> 
 

 
    <div id="accordion-2" class="accordion-section-content"> 
 
     <p>accordion 2 text</p> 
 
    </div> 
 
    </div> 
 
</div>

Answer 2

Вы можете сделать что-то вроде этого:

$(".selector").accordion({ 
    active: 2 
}); 

или

$(".selector").accordion("option", "active", 2); 

Вместо 2, вы можете передать любую баян панель идентификатор, который вы хотите активно загрузки страницы.

Передайте документ в документе.