Accordian Expandable It Can Slide Down, But Wont Slide Up

here is the code, can someone help to modify? (function($){ $(document).ready(function() { // Categories menu opening // Categories menu opening $('.woocommerce.widget_product_cat

Solution 1:

To "toggle" element's visibility with sliding effect, you could use slideToggle.

Note that you need to remove :not(.opened) from the selector, because the handler won't work when this parent element has this class.

$(document).on("click", ".woocommerce.widget_product_categories .product-categories li.cat-parent > .cat-menu-close", function(e) {
  var $catParent = $(this).closest('li.cat-parent');
  var state = $catParent.hasClass('close');

  $catParent.toggleClass('opened', !state);

  $(this).nextAll('ul.children:first').slideToggle(state);
});

.cat-menu-close {
  cursor: pointer;
}

ul {
  list-style: none;
}

ul.children {
  display: none;
}

<scriptsrc="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script><divclass="woocommerce widget_product_categories"><divclass="product-categories"><ul><liclass="cat-parent"><spanclass="cat-menu-close"><button>Expand/collapse</button></span><div>Random sibling element</div><ulclass="children"><li>Child item</li><li>Child item</li><li>Child item</li></ul></li></ul></div></div>