Open a collapsible if a link with collapsible's id as target is clicked

Question

In my code, you will see one button and a collapsible element. If the button is clicked then the page will be scroll to collapsible.

Is it possible to open collapsible after user clicks on the button? I thought about using viewport but then collapsible is going to open every time when it is in viewport.

Live editor: https://www.w3schools.com/code/tryit.asp?filename=GD9IMIC5QGTK

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";
    }
  });
}

.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;
}

<a href="#section2">Click Me to Smooth Scroll to Section 2 Below</a>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br><br>
<br>
<br>
<br><br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br><br>
<br>
<br>
<br><br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br><br>
<br>
<br>
<br><br>
<br>
<br>
<br>

<h2>Collapsibles</h2>
<div id="section2">
  <p>A Collapsible:</p>
  <button type="button" class="collapsible">Open Collapsible</button>
  <div class="content" id="section2">
    <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>
</div>

Do try inserting a runnable snippet when it's runnable using `Ctrl + M`. — Richard, Mar 27 '20 at 12:29
Does my answer below (https://stackoverflow.com/a/60886047/9060223) answer your question? — Richard, Apr 04 '20 at 08:58

score 1 · Accepted Answer · answered Mar 27 '20 at 12:29

Simply style the display of the collapsible div to block upon clicking the link. To get the href value of an element, you can use getAttribute('href'). Then, you can target the .collapsible class's next element sibling inside a div with the id of the value you got from getAttribute('href').

Here's a working solution that targets all anchors.

// Trigger a click on collapsible when a link visits it
var links = document.querySelectorAll('a')
links.forEach(link => {
  link.addEventListener('click', function(e) {
    const linkHref = link.getAttribute('href')
    const targetCollapsible = document.querySelector(`${linkHref} .collapsible`)
    if (targetCollapsible && targetCollapsible.nextElementSibling) targetCollapsible.nextElementSibling.style.display = 'block'
  })
})

// Your function
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";
    }
  });
}

.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;
}

<a href="#section2">Click Me to Smooth Scroll to Section 2 Below</a>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>

<h2>Collapsibles</h2>
<div id="section2">
  <p>A Collapsible:</p>
  <button type="button" class="collapsible">Open Collapsible</button>
  <div class="content" id="section2">
    <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>
</div>

This solution works if your .collapsible is structured such that it is contained within an element with the id referenced by the anchor href and the display CSS style you're altering is the next element sibling of the .collapsible class. A better way to do this is instead to give the element to be styled a class so you can select it directly.

Open a collapsible if a link with collapsible's id as target is clicked

1 Answers1