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 ?

Answer 1

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.