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 classvar 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 hashvar hash = e.path[0].hash;

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

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

HTML

<ahref="schedule.html#0906"class="accordion-link">2018.09.06</a>(木) 今池GROW<br><br><buttonclass="accordion"id="0906">2018/09/06(木)今池GROW </button><divclass="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 & "