Как автоактивировать аккордеон Getuikit

Я хочу решить свою проблему с Getuikit. Аккордеонный плагин работает. Но я хочу сделать активным (нажатым) определенный аккордеон при загрузке страницы. Как я могу это сделать ?

изменить: getuikit v2

<div class="uk-accordion" data-uk-accordion="{collapse: false}">
    <h3 class="uk-accordion-title">Accordion 1</h3>
    <div class="uk-accordion-content">
        <!-- Content -->
    </div>

    <h3 class="uk-accordion-title">Accordion 2</h3>
    <div class="uk-accordion-content">
        <!-- Content -->
    </div>

    <h3 class="uk-accordion-title">Accordion 3</h3>
    <div class="uk-accordion-content">
        <!-- Content -->
    </div>

    <h3 class="uk-accordion-title">Accordion 4</h3>
    <div class="uk-accordion-content">
        <!-- Content -->
    </div>
</div>

Пример: Как активировать «Аккордеон 3 и Аккордеон 4»?


accordion getuikit
person FreeSoulTR    schedule 30.01.2017    source источник
comment
какая версия уикита? 2 или 3?   -  person cssBlaster21895    schedule 30.01.2017
comment
Я использую Getuikit версии 2   -  person FreeSoulTR    schedule 31.01.2017

Ответы (2)


arrow_upward
2
arrow_downward

Я нашел ответ на SO. Здесь кто-то открывает все аккордеоны на странице, поэтому я немного подправил код для вас. Вы можете выбрать, какой аккордеон вы хотите открыть при инициализации.

UIkit.on('afterready.uk.dom', function() {
 var accordion = UIkit.accordion(UIkit.$('#myAccordion'), {collapse:false, showfirst: false});
 //choose which number of accordion interest you, here we choose 1 and 3, index starts from 0 
 accordion.find('[data-wrapper]').each(function (index) {
   if (index==0 || index==2)
     accordion.toggleItem(UIkit.$(this), true, false); // animated true and collapse false
  });
});

Вот вам рабочая ручка.

person cssBlaster21895    schedule 30.01.2017

arrow_upward
0
arrow_downward

Если я не ошибаюсь, Вы хотите оставить по умолчанию первый аккордеон. Правильно? Если да, вам не нужно делать для этого дополнительный код. Как Uikit, так и само решение.

You just have to put uk-open with first

  • , take a look at below code and codepen.

    <ul uk-accordion>
<li class="uk-open">
    <a class="uk-accordion-title" href="#">Item 1</a>
    <div class="uk-accordion-content">
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
    </div>
</li>
<li>
    <a class="uk-accordion-title" href="#">Item 2</a>
    <div class="uk-accordion-content">
        <p>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor reprehenderit.</p>
    </div>
</li>
<li>
    <a class="uk-accordion-title" href="#">Item 3</a>
    <div class="uk-accordion-content">
        <p>Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat proident.</p>
    </div>
</li>

    Посмотрите также на CodePen: Codepen

    person Nasrullah Bhoraniya    schedule 11.05.2021