Shopify Question posted in
The Shopify help center can be found here.

Hide/Show Element when Clicked – Shopify

I needed help on how to hide the second level ul & li and only display it if the 1st level li is clicked. For some reason, I can not find the document to add an onclick() function on the html part. Is this possible? Looking for js and css to get it work. Thanks in advance.

So, by default, the list should look like this:

Abgasanlage

Steuerkettenantrieb

When Abgasanlage is clicked, its subcategory will open which should look like this:

Abgasanlage

  • Sensoren

Steuerkettenantrieb

When Steuerkettenantrieb is clicked, its subcategory will open which should look like this:

Abgasanlage

Steuerkettenantrieb

  • Steuerkettensätze

  • Steuerketten

  • Gleitschienen

  • Kettendeckel

  • Ritzel

Here’s the html code:

<ul class="sidebar_cate">
    <li class="grid__item lvl-1  active">
        <a href="/collections/abgasanlage" class="site-nav lvl-1">Abgasanlage</a>
            <ul class="subLinks">
                <li class="lvl-2">
                    <a href="/collections/sensoren" class="site-nav lvl-2">Sensoren</a>
                </li>
            </ul>
    </li>
    <li class="grid__item lvl-1 ">
        <a href="/collections/steuerket-tenantrieb" class="site-nav lvl-1">Steuerkettenantrieb</a>
            <ul class="subLinks">
                <li class="lvl-2">
                    <a href="/collections/steuerkettensatze" class="site-nav lvl-2">Steuerkettensätze</a></li>
                <li class="lvl-2">
                    <a href="/collections/steuerketten" class="site-nav lvl-2">Steuerketten</a></li>
                <li class="lvl-2">
                    <a href="/collections/gleitschienen" class="site-nav lvl-2">Gleitschienen</a></li>
                <li class="lvl-2">
                    <a href="/collections/kettendeckel-und-kettenrader-ritzel" class="site-nav lvl-2">Kettendeckel</a></li>
                <li class="lvl-2">
                    <a href="/collections/ritzel" class="site-nav lvl-2">Ritzel</a></li>
            </ul>
    </li>
</ul>
Tags:

2

Answers


  1. 0

    i think it can be resolved in your js file using these lines of code in a function that get the selected super item id as param

      function ShowHideItem(selectedItem)  {  
switch (selectedItem)
{
case xxx :       
 document.getElementById("Item1").style.visibility="hidden";  
 document.getElementById("Item2").style.visibility="hidden";   
break;
}
    }
    Login or Signup to reply.
  2. 0

    This can be done together with Js and CSS.

    First give a class subLinks to inner UL. then hide it with CSS.

    ul li > .subLinks {
    display: none
}

    then write a click event on each li, check if inner sublinks exist then add active class to the li element. based on the active class show the inner list with css.

    JS

    $("#nested-list li").click(function(e) {
    if ( $(this).children("ul").length ) {
        $(this).toggleClass('active');
    }
});

    CSS

    ul li.active > .subLinks {
    display: block
}

    see the example I have created. https://stackblitz.com/edit/nested-ul-li-list-toggle-basic
    This is a basic example to show how you can achieve it, you can further customize it to your needs and add more check to prevent clicking on the link etc.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search