Open Collapsible Section From Link

Question

I've made a page that has expandable/collapsible sections but I can't figure out how to get them to open from a navigation link. The expandable/collapsible sections expand as I want them to when they are clicked on, and my nav links take me to the correct section, however, I'd also like the nav links to expand the appropriate section in addition to taking me to that part of the page. I'm a bit of a novice so any help will be appreciated.

Here is my HTML & CSS & jQuery:

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: #eee;
  font: 15px/30px "raleway-heavy", sans-serif;
  text-shadow: 0 1px 4px rgba(0, 0, 0, 0.6);
  text-transform: uppercase;
  letter-spacing: 2.5px;
  margin-bottom: 30px;
  margin-top: 18px;
  left: 3px;
  color: #4c4c4c;
  cursor: pointer;
  padding: 18px;
  width: 100%;
  border: none;
  text-align: left;
  outline: none;
  font-size: 15px;
}

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

.collapsed-content {
  padding: 0 18px;
  display: none;
  overflow: hidden;
  margin-bottom:30px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<nav id="nav-wrap">
  <ul id="nav" class="nav">
    <li><a class="smoothscroll" href="#link1">Link 1</a></li>
    <li><a class="smoothscroll" href="#link2">Link 2</a></li>
  </ul> <!-- end #nav -->
</nav> <!-- end #nav-wrap -->
    
<!-- link1 -->
<section id="link1">
  <button type="button" class="collapsible">Link 1 Title<span style="color:#e4b101;">.</span></button>
  <div class="collapsed-content">
    <hr />
    <p>Link 1 content.</p>
  </div>
</section>
<!-- end link1 -->
    
<!-- link2 -->
<section id="link2">
  <button type="button" class="collapsible">Link 2 Title<span style="color:#e4b101;">.</span></button>
  <div class="collapsed-content">
    <hr />
    <p>Link 2 content.</p>
  </div>
</section>
<!-- end link2 -->
    
<br /><br /><br /><br /><br /><br />

Here is a jsfiddle of my code:

https://jsfiddle.net/AceCrusher/4dporn7a/2/

Answer 1

Consider using data-* attributes on links

<li><a class="smoothscroll" href="#link1" data-target="#link1">Link 1</a></li>
<li><a class="smoothscroll" href="#link2" data-target="#link2">Link 2</a></li>

You can then add click event listeners to all of the links and when the user clicks the link, expand the content. You can use something like this:

const links = document.querySelectorAll('.smoothscroll')

links.forEach(link => {
    link.addEventListener('click', () => {
        const section = document.querySelector(link.dataset.target)
        const content = section.querySelector('.collapsed-content')
        if (content.style.display === "block") {
          content.style.display = "none";
        } else {
          content.style.display = "block";
        }
    })
})