|
|||
Akkordeon Thema wieder zumachen
ich habe hier ein Akkordeon
https://codepen.io/raubaca/pen/PZzpVe Ich benutzt das rechte Blaue, wie kann man ein gerade geöffnetes Thema wieder schließen? Man kann natürlich ein anders Thema öffnen, aber ich will das gerade geöffnetes wieder schließen. Ich habe es mit JS versucht, einfach document.getElementById('thema_1').style.maxHeight ='0'; was super klappt, aber genau dieses Thema bekomme ich dann nicht mehr auf. im Quelltext habe ich das div eine id gegeben: <div id='thema_x' class='tab-content'> so gibt es thema_1 thema_2 und thema_3 Vielleicht geht es auch ohne js Geändert von seerose (30.07.2018 um 16:46 Uhr) |
Sponsored Links |
|
|||
Hallo seerose,
falls du den kompletten Code vom CSS übernommen hast, brauchst du nur die Zeile HTML-Code:
<input id="tab-four" type="radio" name="tabs2">
HTML-Code:
<input id="tab-four" type="checkbox" name="tabs2">
Code:
input[type=checkbox] + label::after { content: "\25BC"; } input[type=radio] + label::after { content: "\25BC"; } input[type=checkbox]:checked + label::after { transform: rotate(180deg); } input[type=radio]:checked + label::after { transform: rotateX(180deg); Hubert |
Sponsored Links |
|
|||
Mischung aus Radio und Checkbox
Vielen Dank für deine Antwort
Das ist mir auch schon in den Sinn gekommen, dann hätte man 3 Selectboxen, aber jede steuert für sich auf und zu. Es soll so sein, klickt man ein Thema an schließen sich alle außer den angeklickten, also Radio-Button steuerung, aber man soll immer noch die Möglichkeit haben den soeben angeklicktes wieder zu schließen. Dazu wird wohl etwas js nötig werden. Ich habe versucht es auf Radio-Button zu lassen, und dann den Klick in einer JS Funktion auszuwerten. if (document.getElementById('wert').checked == true) document.getElementById('wert').checked=0 also abfragen wenn „zu“ nichts machen, wenn „offen“ schließen, aber die if abfrage greif nicht, ich vermute durch die Animation wird der Status verzögert geschrieben. In der Checked Variante müsste man alle offenen über js "zu" machen außer den angeklickte, das habe ich noch nicht versucht, könnte aber auch sein das man den Status wegen der Animation nicht ablesen kann. Kann man eigentlich über den Pfeil rechts oben einne Link zu setzen? |
|
||||
Also mit JS kann fast alles machen.
willst du das so haben ? http://sebastian1012.bplaced.net/sof...ead.php?tid=51 Das mit den Link habe ich nicht ganz verstanden. Kuck mal ob das so richtig ist |
|
|||
Suchst du sowas?
Basierend auf deinem CodePen, wenn alles Checkboxen sind, mit rudimentärem JS:
Code:
var list = document.querySelectorAll('.blue input'); for (var item of list) { item.addEventListener('click', function() { var list2 = document.querySelectorAll('.blue input'); for (var item2 of list2) { if (item2 != this) item2.checked = false; } }); } Code:
$('.blue input').click(function(){ $('.blue input').not(this).prop('checked',false); }); Geändert von wanst (02.08.2018 um 11:46 Uhr) Grund: Syntaxkorrektur |
|
|||
Du kannst auf CodePen (und auch jsfiddle, etc.) verschiedene Libraries einstellen. Für Codepen auf "einstellungen" klicken, dort dann unter "Javascript" jQuery auswählen.
|
|
|||
Zitat:
Und wenn im jQuery-Code was nicht stimmt, findet man das relativ schnell über die API-Doku (api.jquery.com) heraus. Da ist pures JS fürn Anfang schon umständlicher. |
|
|||
Zitat:
Das rechte blaue Beispiel. hier ist doch rechts ein Pfeil, darauf hätte ich gerne einen Link, der Pfeil wird aber über css erzeugt. Das Beispiel entspricht 95% meine Vorgaben, aber öffnet man z.b. den 1. soll man den auch wieder schließen können, ohne erst den 2 oder 3 zu öffnen. |
Sponsored Links |
|
|||
Zitat:
|
Sponsored Links |
Themen-Optionen | |
Ansicht | |
|
|
Ähnliche Themen | ||||
Thema | Autor | Forum | Antworten | Letzter Beitrag |
Umfragen zum Thema "Biometrische Verfahren" und "Datenschutz" | asiani | Offtopic | 2 | 19.11.2012 13:57 |
Video zum Thema Barrierefreies Webdesign | Webstandard | Barrierefreiheit | 11 | 27.11.2006 14:41 |
Foren und Blogs zum Thema Webdesign | Lloyd Larkin | Offtopic | 1 | 05.03.2006 15:12 |
Scrollbares Textfeld mit purem CSS | Dancer | CSS | 6 | 24.01.2005 16:58 |
Thema Schriftgrößen | Alex | Knowledge Base | 16 | 06.08.2004 11:52 |