Here is the code snippet I am working with:
sTAT **javascript**
var acc = document.getElementsByClassName("item-wrapper");
var i;
for (i = 0; i < acc.length; i++) {
acc[i].onclick = function(){
this.classList.toggle("selected");
this.nextElementSibling.classList.toggle("show");
}
}
});
CSS
.accordion-menu{
list-style: none;margin: 0;padding: 0;
}
.accordion-menu a {
text-decoration: none;
background: none;
font-family: arial;
}
.accordion-menu a:hover,
.accordion-menu a:visited,
.accordion-menu a:active,
.accordion-menu a:focus{
background: none;
}
/* Rest of the CSS styles have been preserved from original text */
HTML
<div class="module_menu">
<div class="module-content clearfix">
<ul class="accordion-menu" id="demo-menu">
<li class="item-wrapper">
<a href="/category1">Category 1</a>
</li>
/* Additional HTML markup has been condensed */
<li class="item-wrapper">
<a href="/category4">Category 4</a>
</li>
</ul>
</div>
</div>
fg
In order to show the card when clicking the item-wrapper div and ensure that there is an ul-wrapper div tag behind it, you can add specific conditions in JavaScript. Thank you.