How auto active Getuikit accordion

Question

I want solve my problem with Getuikit. Accordion plugin is working. But I want make active (clicked) specific accordion on page load. How can I do this ?

edit: 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>

Example: How make "Accordion 3 & Accordion 4" active ?

which version of uikit? 2 or 3? – cssBlaster21895 Jan 30 '17 at 20:26 — cssBlaster21895, Jan 30 '17 at 20:26
I am using Getuikit version 2 – FreeSoulTR Jan 31 '17 at 12:30 — FreeSoulTR, Jan 31 '17 at 12:30

cssBlaster21895 · Accepted Answer · 2021-03-10T08:57:55.933

I've found the answer on SO. Here someone opens all accordions on page, so I've tweaked the code little bit for you. You can choose, which accordion you want to open on init.

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

Here's working pen for you.

score 0 · Answer 2 · answered May 11 '21 at 09:13

If I am not wrong, You are looking to keep by default first accordion. right? If yes you don't need to do any extra code for this. As Uikit as the solution itself.

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>

Look at CodePen too : Codepen

How auto active Getuikit accordion

2 Answers2