Javascript Question posted in
A very good W3school tutorial can be found here.

Javascript – close other menus when one is clicked

everything i keep trying breaks it.
Help me close the other menus when one is clicked.
https://www.w3schools.com/howto/tryit.asp?filename=tryhow_js_collapsible

the maxHeight is confusing me with the nextElementSibling

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

sry bout the lorem, it said my question was too short

Tags:

2

Answers


  1. 0

    You just makes it difficult, just think simply .
    Use classes (I mean class in html) just add a unique class to opened one and when is other one is clicked remove this class , you certainly know document.getElementsByClassName()
    And remove it , also in clicked element
    Just add event listener or onClick event
    Add the class
    It’s that easy!

    Login or Signup to reply.
  2. 0

    Post-Note: This is by no means the optimal or the best way to do this. It’s just what I believe is the easiest for someone to understand.

    Let’s start off by making a function closeOtherCollapsibles() that wraps up all the functionality to do just that. This way it’ll be easier to understand.

    However before that, we need to identify where it should go. Looking at the W3Schools code, this spot seems best

        ...
    if (content.style.display === "block") {
      content.style.display = "none";
    } else {
      content.style.display = "block";

      // When the current collapsible is active,
      // close all others. Simple enough.
      closeOtherCollapsibles(this);
     }
   ...

    Our function closeOtherCollapsibles() is also going to be pretty simple. It needs to do two things.

    1. Clear dark highlight on collapsible caused by active class
    2. Collapse/Close other collapsibles

    We do this by iterating over all collapsibles, and just excluding our current one from these changes.

    function closeOtherCollapsibles(currentCollapsible) {
    let collapsibles = document.getElementsByClassName("collapsible");
    Array.from(collapsibles).forEach((collapsible) => { 
        if (collapsible != currentCollapsible) {
            collapsible.classList.remove("active"); // 1. Clear dark highlight on collapsible
            collapsible.nextElementSibling.style.display = "none"; // 2. Collapse/Close other collapsibles
        }
   })
}

    And here’s just that in full action.

    var coll = document.getElementsByClassName("collapsible");
var i;

for (i = 0; i < coll.length; i++) {
  coll[i].addEventListener("click", function() {
    this.classList.toggle("active");
    var content = this.nextElementSibling;
    if (content.style.display === "block") {
      content.style.display = "none";
    } else {
      content.style.display = "block";
      closeOtherCollapsibles(this);
     }
  });
}

function closeOtherCollapsibles(currentCollapsible) {
    let collapsibles = document.getElementsByClassName("collapsible");
    Array.from(collapsibles).forEach((collapsible) => { 
        if (collapsible != currentCollapsible) {
            collapsible.classList.remove("active");
            collapsible.nextElementSibling.style.display = "none";
        }
   })
}
    <!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
.collapsible {
  background-color: #777;
  color: white;
  cursor: pointer;
  padding: 18px;
  width: 100%;
  border: none;
  text-align: left;
  outline: none;
  font-size: 15px;
}

.active, .collapsible:hover {
  background-color: #555;
}

.content {
  padding: 0 18px;
  display: none;
  overflow: hidden;
  background-color: #f1f1f1;
}
</style>
</head>
<body>

<h2>Collapsibles</h2>

<p>A Collapsible:</p>
<button type="button" class="collapsible">Open Collapsible</button>
<div class="content">
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
</div>

<p>Collapsible Set:</p>
<button type="button" class="collapsible">Open Section 1</button>
<div class="content">
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
</div>
<button type="button" class="collapsible">Open Section 2</button>
<div class="content">
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
</div>
<button type="button" class="collapsible">Open Section 3</button>
<div class="content">
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
</div>

</body>
</html>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search