Блог

Как закрыть открыть аккордеон при нажатии на элемент .shewron?

Пример: https://codepen.io/npofopr/pen/vYKKXbJ?editors=1010

 let util = UIkit.util;
let lkOrderIconExpand = document.querySelectorAll(".shewron");

util.on(lkOrderIconExpand, "click", function () {
  let accordionEl = util.$("[uk-accordion]");

  // find closed li array
  let allItems = util.$$("[uk-accordion] > li");

  // for each element
  util.each(allItems, function (el) {
    // get index
    let openIndex = util.index(el);

    // Check if some element has some class
    if (util.hasClass(allItems, "uk-open")) {
      console.log("Class was found!");
      // toggle it
      UIkit.accordion(accordionEl).toggle(openIndex);
    } else {
      console.log("Class was NOT found!");
      // toggle it
      UIkit.accordion(accordionEl).toggle(openIndex);
    }
  });
});
  

Вы можете легко сделать это с помощью CSS:

 .uk-accordion-title::before{
background-image: url(**icon-url-here);
}
.uk-open > .uk-accordion-title::before{
background-image: url(**icon-url-here);
}
  

Так что ваши значки шевронов будут отображаться вместо стандартных значков аккордеона.