zurück zur Startseite
  


Zurück XHTMLforum > Webentwicklung (außer XHTML und CSS) > Javascript & Ajax
Seite neu laden Accordion soll automatisch öffnen

Antwort
 
LinkBack Themen-Optionen Ansicht
  #1 (permalink)  
Alt 22.05.2018, 16:39
Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 07.10.2014
Beiträge: 84
seerose befindet sich auf einem aufstrebenden Ast
Standard Accordion soll automatisch öffnen

Ich habe hier ein CSS Accordion
https://codepen.io/raubaca/pen/PZzpVe

Auf meiner Startseite habe ich 3 Links, über die 3 Links will ich direkt zum

Accordion kommen und es soll sich auch schon das Betreffende Accordion öffnen.

Also klicke ich auf den 2. Link wird die Accordion.html geladen und soll gleich Label Two öffnen werden, beim 1. Link halt Label One.

Würde man das über js machen oder gibt es hier ein dreh über css?
Mit Zitat antworten
Sponsored Links
  #2 (permalink)  
Alt 24.05.2018, 11:45
Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 07.10.2014
Beiträge: 84
seerose befindet sich auf einem aufstrebenden Ast
Standard 90% ok

im Betreffenden Accordion habe ich einfach geschrieben
HTML-Code:
<div style='max-height: 80em;'    border:0px solid #ff0000' class='tab-content'>
So wird er geöffnet, leider bleibt er dann auch offen wenn ich auf ein anderen klicke, das ist aber nicht so schlimm
Mit Zitat antworten
Sponsored Links
  #3 (permalink)  
Alt 24.05.2018, 19:07
Benutzerbild von hemfrie
Administrator
XHTMLforum-Kenner
 
Registriert seit: 18.12.2003
Ort: Düsseldorf
Beiträge: 2.775
hemfrie ist jedem bekannthemfrie ist jedem bekannthemfrie ist jedem bekannthemfrie ist jedem bekannthemfrie ist jedem bekannthemfrie ist jedem bekannt
Standard

Du musst Dir das HTML und CSS genauer ansehen, um zu verstehen wie die Mechanik hier funktioniert.

Die einzelnen Accordion Buttons sind labels, die dafür sorgen, dass ein input (type radio) entprechend dem gewählten Tab auf checked gesetzt wird.

Der checked Zustand wird dann vom CSS her genutzt um den Content zu zeigen

Code:
/* :checked */
input:checked ~ .tab-content {
  max-height: initial;
}
Diese Funktionsweise kannst Du Dir nun zu Nutze machen. Am einfachsten ist es, wenn Du dafür Anker benutzt, die Du dann mit Javascript auswerten kannst.

Code:
<a href="./Accordion.html#tab-one">tab-one</a>
<a href="./Accordion.html#tab-two">tab-two</a>
<a href="./Accordion.html#tab-three">tab-three</a>
In der Accordion.html Datei kannst Du dann mit javascript den Ankernamen abfragen und das entsprechende input element auf checked setzen

Code:
window.onload = function() {
  var anchor = window.location.hash.slice(1);
  document.getElementById(anchor).checked = true;
};
Beispiel:

https://codepen.io/anon/pen/xjNoyM#tab-one
https://codepen.io/anon/pen/xjNoyM#tab-two
https://codepen.io/anon/pen/xjNoyM#tab-three

immer schön drauf achten, dass die Ankernamen mit den labelnamen übereinstimmen
__________________
http://twitter.com/xhtmlforum - XHTMLforum - Infos bei Serverausfall, Wartungsarbeiten etc.
Mit Zitat antworten
Antwort

Themen-Optionen
Ansicht

Forumregeln
Es ist Ihnen nicht erlaubt, neue Themen zu verfassen.
Es ist Ihnen nicht erlaubt, auf Beiträge zu antworten.
Es ist Ihnen nicht erlaubt, Anhänge hochzuladen.
Es ist Ihnen nicht erlaubt, Ihre Beiträge zu bearbeiten.

BB-Code ist an.
Smileys sind an.
[IMG] Code ist an.
HTML-Code ist aus.
Trackbacks are an
Pingbacks are an
Refbacks are aus


Ähnliche Themen
Thema Autor Forum Antworten Letzter Beitrag
iframe nach klick öffnen und starten Schnisi CSS 1 28.08.2014 22:24
Accordion Problem Internet Explorer beamwe CSS 3 30.11.2012 17:16
CSS Accordion öffnen mit mausklick gandalf_hh CSS 6 16.08.2011 10:37
Accordion in Nav Moby Javascript & Ajax 4 07.01.2011 07:40
Ueber PullDown Menue Datei oeffnen chrism Javascript & Ajax 6 26.01.2007 23:42


Alle Zeitangaben in WEZ +2. Es ist jetzt 02:15 Uhr.