questions

Create an accordion dropdown menu for parent & child attributes using jquery or javascript

Rate this post

I have the following jquery i managed to piece together with help from stackoverflow:

jQuery( document ).ready(function() {
    jQuery(".product-categories .cat-item-17").attr("data-toggle", "collapse").attr("role", 
"button").attr("aria-expanded", "false").attr("aria-controls", "collapseMenu").attr("href", 
"#childcats1").attr("id", "parent-sidebar");
    jQuery(".product-categories .cat-item-17 .children").attr("id", "childcats1").addClass("collapse");

});

jQuery( document ).ready(function() {
    jQuery(".product-categories .cat-item-22").attr("data-toggle", "collapse").attr("role", 
"button").attr("aria-expanded", "false").attr("aria-controls", "collapseMenu").attr("href", 
"#childcats2").attr("id", "parent-sidebar");
    jQuery(".product-categories .cat-item-22 .children").attr("id", "childcats2").addClass("collapse");

});

The above script adds various attributes to each of my parent categories in WordPress (the first li with te class of ‘cat-parent’) and adds an ID for the href to the child category (the nested ul with the class of ‘children’). This is to create a bootstrap accordion-style nav dropdown menu. See the outputted html below:

<ul class="product-categories">

<li class="cat-item-17 cat-parent current-cat-parent collapsed" data-toggle="collapse" role="button" 
aria-expanded="false" aria-controls="collapseMenu" href="#childcats1" id="parent-sidebar">
<a href="https://www.example.com/clothing/">Clothing</a>
  <ul class="children collapse" id="childcats1" style="">
  <li class="cat-item cat-item-20"><a 
  href="https://www.example.com/clothing/accessories/">Accessories</a></li>
  <li class="cat-item cat-item-19"><a href="https://www.example.com/clothing/hoodies/">Hoodies</a> 
  </li>
  <li class="cat-item cat-item-18 current-cat"><a 
  href="https://www.example.com/clothing/tshirts/">Tshirts</a></li>
  </ul>
</li>

<li class="cat-item cat-item-22 cat-parent collapsed" data-toggle="collapse" role="button" aria- 
expanded="false" aria-controls="collapseMenu" href="#childcats2" id="parent-sidebar">
<a href="https://www.example.com/decor/">Decor</a>
  <ul class="children collapse" id="childcats2" style="">
  <li class="cat-item cat-item-31"><a href="https://www.example.com/decor/pennants/">Pennants</a> 
  </li>
  </ul>
</li>

</ul>

The problem is when i create a new parent menu item with children in WordPress i have to edit my jquery script to add the new cat-parent and children ID’s.

Is there a way to prevent having to do this with some kind of foreach script i.e:

foreach cat-parent add the attributes + unique href ID, and for the child ul add a unique ID?

Thanks for any help.

 

✔️Solution:

You can use .each to loop through li and then using $(this) add attribute to your lis .Also, to to add id to your children you can use $(this).find(".children") this will refer to children ul then add attribute there as well.

Demo code :

 

//loop through li
$(".product-categories > li").each(function(i) {
  //use this to refer current li
  $(this).attr("data-toggle", "collapse").attr("role",
    "button").attr("aria-expanded", "false").attr("aria-controls", "collapseMenu").attr("href",
    `#childcats${i}`).attr("id", `parent-sidebar${i}`);
  //use .find to get children ul and add if there
  $(this).find(".children").attr("id", `childcats${i}`).addClass("collapse");
})
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
<ul class="product-categories">
  <li class="cat-item-17 cat-parent current-cat-parent collapsed">
    <a href="https://www.example.com/clothing/">Clothing</a>
    <ul class="children" style="">
      <li class="cat-item cat-item-20"><a href="https://www.example.com/clothing/accessories/">Accessories</a></li>
      <li class="cat-item cat-item-19"><a href="https://www.example.com/clothing/hoodies/">Hoodies</a>
      </li>
      <li class="cat-item cat-item-18 current-cat"><a href="https://www.example.com/clothing/tshirts/">Tshirts</a></li>
    </ul>
  </li>
  <li class="cat-item cat-item-22 cat-parent collapsed">
    <a href="https://www.example.com/decor/">Decor</a>
    <ul class="children" style="">
      <li class="cat-item cat-item-31"><a href="https://www.example.com/decor/pennants/">Pennants</a>
      </li>
    </ul>
  </li>

</ul>

Leave a Reply

Your email address will not be published.

Back to top button