uk-accordion – problem with multiple accordions

[neophron]

Hi guys,

I have a page with multiple uk-accordions (https://getuikit.com/docs/accordion). The problem is, that if an user opens an item in one uk-accordion and after that clicks on the next item in a different uk-accordion, the first item stays open. I want to change this in a way, that nevertheless where the user clicks, only one item should be visible.

I found a script and now I'm trying to adopt it:

$('.uk-accordion > li > a').click(function(e) {

      // hide all div.uk-accordion-content
      $('.uk-accordion-content').attr("hidden", true);
      // remove class .uk-open
      $('.uk-accordion > li').removeClass('uk-open');

      $(this).addClass('uk-open');
      // show selected accordion
      var id = $(this).data('.uk-accordion');
      var article = $('article[data-article=' + id + ']');
      article.removeAttr('hidden');
     
    });

    $('.uk-accordion > li > a').click(function(e) {
      
      e.preventDefault();
    });

As you see, my problem is, that I'm not familiar with js.

[elabx]

Isn't that the default behaviour of the accordions? That's what it would seem like from the examples on the page, the component has a "multiple" option that is set by default on false. Maybe you need to update UIkit?

EDIT: Just re-read, that it's ANOTHER accordion. 

I'd try something like this, just wrote it on the fly so there are probably errors, but the idea is to close any other accordions with the component's API, rather than adding/removing classes. 

var accordions = $('.uk-accordion');

accordions.each(function(index, item){

    UIkit.util.on(item, "show" , function(){

        accordions.not(item).each(function(index, item){

            var opened = $(item).children('.uk-open').index();
            UIkit.accordion(item).toggle(index);

        })

    })

})

 

[neophron]

5 hours ago, elabx said:

Isn't that the default behaviour of the accordions? That's what it would seem like from the examples on the page, the component has a "multiple" option that is set by default on false. Maybe you need to update UIkit?

EDIT: Just re-read, that it's ANOTHER accordion. 

I'd try something like this, just wrote it on the fly so there are probably errors, but the idea is to close any other accordions with the component's API, rather than adding/removing classes. 

var accordions = $('.uk-accordion');

accordions.each(function(index, item){

    UIkit.util.on(item, "show" , function(){

        accordions.not(item).each(function(index, item){

            var opened = $(item).children('.uk-open').index();
            UIkit.accordion(item).toggle(index);

        })

    })

})

 

Hi, thanks for your help, but right now it doesn't work.
I prepared in codepen an example: https://codepen.io/neophron/pen/mdeaoyK

I also tested the accordion example directly in codepen (https://getuikit.com/docs/accordion) with your script, but with no result.

[elabx]

Got this working on your codepen: 

 

var accordions = $("[uk-accordion]");
accordions.each(function(index, item){
    UIkit.util.on(item, "beforeshow" , function(e){
         accordions.not(item).each(function(index, item){
           var opened = $(item).children('.uk-open');
           var openItemIndex;
           if(opened.length){
            openItemIndex = opened.index();
           }
           if(openItemIndex !== undefined){
              UIkit.accordion(item).toggle(openItemIndex);
           }
        });
    })
});

 

[neophron]

¡Muchas gracias!