by Guest » 07 Jan 2025, 02:33
Ich möchte innerhalb eines Akkordeons zu einem Abschnitt mit Inhalten scrollen. Wie mache ich das nur mit der ID und einem Tag? Ich habe andere Lösungen gesehen, die das Gleiche tun wollten, aber sie verwenden JavaScript und JQuery, was ich zu vermeiden versuche, weil ich mit einem Content-Management-System arbeite, das einige Einschränkungen bei der benutzerdefinierten Codierung hat und nur ein Textfeld zum Bearbeiten vorhanden ist HTML. (Am Ende des Codes befindet sich etwas Javascript, aber ich habe ein wirklich einfaches Design von W3Schools übernommen, um zu zeigen, was ich tun möchte.)
Das habe ich versucht, aber es funktioniert nicht :
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";
}
});
}
Code: Select all
.accordion {
background-color: #eee;
color: #444;
cursor: pointer;
padding: 18px;
width: 100%;
border: none;
text-align: left;
outline: none;
font-size: 15px;
transition: 0.4s;
}
.active, .accordion:hover {
background-color: #ccc;
}
.panel {
padding: 0 18px;
display: none;
background-color: white;
overflow: hidden;
}
Code: Select all
Accordion
[url=#Anchor]Jump to a paragraph in Section 2[/url]
Section 1
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
Section 2
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
JUMP TO THIS CONTENT IN SECTION 2.
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
Section 3
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
Ich möchte innerhalb eines Akkordeons zu einem Abschnitt mit Inhalten scrollen. Wie mache ich das nur mit der ID und einem Tag? Ich habe andere Lösungen gesehen, die das Gleiche tun wollten, aber sie verwenden JavaScript und JQuery, was ich zu vermeiden versuche, weil ich mit einem Content-Management-System arbeite, das einige Einschränkungen bei der benutzerdefinierten Codierung hat und nur ein Textfeld zum Bearbeiten vorhanden ist HTML. (Am Ende des Codes befindet sich etwas Javascript, aber ich habe ein wirklich einfaches Design von W3Schools übernommen, um zu zeigen, was ich tun möchte.)
Das habe ich versucht, aber es funktioniert nicht :
[code]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";
}
});
}[/code]
[code].accordion {
background-color: #eee;
color: #444;
cursor: pointer;
padding: 18px;
width: 100%;
border: none;
text-align: left;
outline: none;
font-size: 15px;
transition: 0.4s;
}
.active, .accordion:hover {
background-color: #ccc;
}
.panel {
padding: 0 18px;
display: none;
background-color: white;
overflow: hidden;
}[/code]
[code]
Accordion
[url=#Anchor]Jump to a paragraph in Section 2[/url]
Section 1
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
Section 2
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
JUMP TO THIS CONTENT IN SECTION 2.
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
Section 3
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
[/code]
Mobile version