[FIXED] How to hide Child Category unless Parent Category is clicked?

Issue

Kinda new to the css itself and I need some help, this is my current testing site where I play around with css, http://test.rascalworldwide.com/?post_type=product&customize_changeset_uuid=90ec360e-7331-42b5-aab3-effecf256451 . I was able to hide the child category though I have been trying for almost a day to enable the option for me where when I clicked onto the Parent category, the child category would appear.

This was the code I used to hide the Child category.

.wpf_items_wrapper .wpf_item .wpf_submenu{
   display: none;
}

This is the code I used though still wasn't able to display the child category.

.wpf_items_wrapper .wpf_item .wpf_submenu [type=”checkbox”]{
   display: block;
}

Solution

I am not certain if your second css code is reachable under previous setting of display: none, if you want to use a check box to hide all child elements together with itself, what you can do:

    .className[type=”checkbox”].checked{
       display: none;
    }

however, if you want to hide all child, and only display it when the parent is clicked. you cannot do it only in css, css is only for static styling on certain elements. page interactions are usually accomplished by javascript. which I assume the class name of your parent element is .wpf_items_wrapper .wpf_item .wpf_submenu, then in js file:

    const parentTag = document.querySelector('.wpf_items_wrapper .wpf_item .wpf_submenu');
    const childTags = parentTag.querySelectorAll('*');
    parentTag.addEventListener('click', ()=>{
        childTags.forEach(ch=>{
            ch.style.display = 'block';
        });
    });

in addition, if you want to change the display of all child from none to block by clicking on the parent, I would recommend setting a global variable as flag.

    const parentTag = document.querySelector('.wpf_items_wrapper .wpf_item .wpf_submenu');
    const childTags = parentTag.querySelectorAll('*');
    var flag = true; 

    // initially set display to none if you haven't done it in css
    window.addEventListener('load', ()=>{
        childTags.forEach(ch=>{
            ch.style.display = 'none';
        });
    });

    parentTag.addEventListener('click', ()=>{
        if(flag){
            childTags.forEach(ch=>{
                ch.style.display = 'block';
            });
        }else{
            childTags.forEach(ch=>{
                ch.style.display = 'none';
            });
        }
        flag = !flag;
    });

Answered By - Weilory

Answer Checked By - David Goodson (PHPFixing Volunteer)