(Click event) toggle and hide others JavaScript

Question

I have an issue and I don't know how I can fix this and I need some help. The following code I have so far

<div class="parent" data="one">
  <div class="child hide" id="one">
    test
  </div>
</div>

<div class="parent" data="two">
  <div class="child hide" id='two'>
    test 2
  </div>
</div>

var parent = document.getElementsByClassName("parent");
for (var i = 0; i < parent.length; i++) {
  parent[i].addEventListener("click", function () {
    var child = document.getElementsByClassName("child");
    var attribute = this.getAttribute("data");
    var the_element = document.getElementById(attribute);
    for (var is = 0; is < child.length; is++) {
      child[is].classList.add('hide');
      child[is].classList.remove('show');
    }
    the_element.classList.add('show');
  });
}

If the user click on the parent the child what is connected get the class show and the hide class is removed. If the user click on another parent all child elements get the class hide en the show class is removed. The code above works for this but what I also want is if the user clicks on the parent and after that the user clicks the same parent the class show remove and add hide at the child.

I think I must use this in JavaScript but how can I combine this all together?

Answer 1

You can toggle element using just adding 'hide' class. Add css classes as below.

<style>
    .parent {
        ...
    }
    .child {
        ...
    }
    .hide {
        display: none;
    }
</style>

Add html elements as below.

<div class="parent" data="one">
    <div class="child hide" id="one">
        test
    </div>
</div>
<div class="parent" data="two">
    <div class="child hide" id='two'>
        test 2
    </div>
</div>

Then add javascript to toggle elements.

<script>

    // Get parent elements and children elements
    let parents = document.getElementsByClassName("parent");
    let children = document.getElementsByClassName("child");

    // Form an Array with parent elements and 
    // add event listener for each parent
    Array.from(parents).forEach(parent => {
        parent.addEventListener("click", function () {

            // Form an Array with child elements and
            // check condition for each children
            Array.from(children).forEach(child => {

                // Check wheather is it the child of clicked parent
                if(child.parentNode == this) {
                    // If clicked parent's child just toggle hide class
                    child.classList.toggle("hide");
                }else {
                    // Add hide class for all other children
                    child.classList.add("hide");
                }
            });

        });
    });

</script>

Thats it. Hope it helps.