Wie kann ich ein Akkordeon mit einem externen Link öffnen?JavaScript

Javascript-Forum
Anonymous
 Wie kann ich ein Akkordeon mit einem externen Link öffnen?

Post by Anonymous »

Ich versuche, von einer Seite meiner Website auf Inhalte in einem Akkordeon auf einer anderen Seite zu verlinken, und ich bekomme das Javascript nicht zum Laufen, um dieses Akkordeon automatisch zu öffnen. Ich habe mir hier viele andere Fragen zu diesem Problem angeschaut und mehrere Dinge ausprobiert, aber die meisten davon scheinen sich auf Leute zu beziehen, die jQuery oder Bootstrap verwenden, was ich nicht tue.Das Verwirrendste daran ist, dass ich es gestern tatsächlich mit dem folgenden Skript zum Laufen gebracht habe, aber als ich versuchte, dasselbe Skript für andere Anker zu verwenden, ist es völlig kaputt gegangen. Selbst nachdem ich die zusätzlichen Anker entfernt habe, funktioniert das Original immer noch nicht mehr. Ich bin ein Javascript-Neuling, daher liegt die Antwort vielleicht auf der Hand. Ich habe gedacht, es könnte etwas mit dem Aufrufen oder Aufrufen der Funktion im Skript zu tun haben. Aber das ist nur eine Vermutung.
Vielen Dank im Voraus an alle, die helfen können!
Hier ist der HTML-Code für den Link:

Code: Select all

[url=/projects#stripmall]
Strip Mall Magazine, [i]Issue 02: Fall 2024.[/i][/b]
[/url]
Der Anker im Akkordeon-Menü:

Code: Select all

 Strip Mall Magazine

panel content goes here

Das CSS für das Akkordeon:

Code: Select all

.accordion {
background-color: transparent;
color: black;
padding: 5px;
width: 100%;
border: none;
text-align: center;
outline: none;
font-size: 16pt;
font-family: "space grotesk";
display: block;
transition: 0.4s;
cursor: pointer;
}

.active, .accordion:hover {
color: inherit;
}

.panel {
display: none;
background-color: white;
overflow: hidden;
padding-left: 15px;
padding-top: 10px;;
}
und schließlich das Javascript für das Akkordeon als Ganzes und die Funktion zum Öffnen des richtigen Abschnitts:

Code: Select all

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

for (i = 0; i < acc.length; i++) {
acc[i].addEventListener("click", function() {
this.classList.toggle("active");

var panel = this.nextElementSibling;
if (panel.style.display === "block") {
panel.style.display = "none";
} else {
panel.style.display = "block";
}

});

//Function to open accordion from link
document.addEventListener("load", function () {
function openAccordionByHash() {
var hash = window.location.hash;
if (hash) {
var target = document.querySelector(hash); matching the hash
if (target && target.classList.contains("panel")) {
this.classList.toggle("active");
}
}
}
});

}

Quick Reply

Change Text Case: 
   
  • Similar Topics
    Replies
    Views
    Last post