Skip to content Skip to sidebar Skip to footer

Open An Accordion While Using link &

I usually get my codes from: https://www.w3schools.com. There is also an accordion to take with this code; However when I use link -> to The accordion doesn't jump open but st

Solution 1:

I had a little bit of trouble understanding what you were asking initially, but I took a stab at it anyways!

Added ID's to the .accordion buttons. Added .accordion-link class for your text links. When accordion-links are clicked, the hash is isolated, and used to trigger a click event on the accordion button with a corresponding ID.

Fiddle: https://jsfiddle.net/ya6vtosc/25/

JS

var acc = document.getElementsByClassName("accordion");
var i;

for (i = 0; i < acc.length; i++) {
  acc[i].onclick = function() {
    this.classList.toggle("active");
    var panel = this.nextElementSibling;
    if (panel.style.maxHeight){
      panel.style.maxHeight = null;
    } else {
      panel.style.maxHeight = panel.scrollHeight + "px";
    }
  }
}

// get list of links by class
var links = document.getElementsByClassName("accordion-link");

var linksLength = links.length;
for(var i=0; i < linksLength; i++){
  links[i].onclick = function(e){
    // preventDefault is probably optional
    // depending on your application
    e.preventDefault();

    // isolate the hash
    var hash = e.path[0].hash;

    // remove # from hash
    hash = hash.substring(1, hash.length);

    // select by id using hash
    document.getElementById(hash).click();
  }

HTML

<a href="schedule.html#0906" class="accordion-link">2018.09.06</a>(木) 今池GROW<br><br>


<button class="accordion" id="0906">2018/09/06(木)今池GROW </button>
<div class="panel">
<p>
Testing
</p>
</div>

EDIT - I also removed your link tag from your button...not sure if a tags are allowed in buttons or not off the top of my head, but it didn't feel right so I kiboshed them.


Post a Comment for "Open An Accordion While Using link & "