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 & "