从链接打开可折叠部分

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

Answer 2

One option is to add an onClick event to the the navigation link that runs the code for expanding the appropriate section.

Your current event listener handles this relative to the "collapsible" element that the handler is attached to. If you wanted to reuse it for both the button click and link click, you would have to rework it to accept a particular collapsible as argument.

Answer 3

Here you go ! I added data-link element to your links and then send filtering to get good elements.

 var coll = document.getElementsByClassName("collapsible"); var navLink = document.getElementsByClassName("smoothscroll"); 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"; } }); } for (i = 0; i < navLink.length; i++) { navLink[i].addEventListener("click", function() { var link = this.dataset.link; var sectionId = document.getElementById(link); var divToOpen = sectionId.querySelector(".collapsible"); divToOpen.classList.toggle("active"); var content = divToOpen.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: leftcollapsible 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" data-link="link1" href="#link1">Link 1</a></li> <li><a class="smoothscroll" data-link="link2" 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 />