XHTMLforum

XHTMLforum (http://xhtmlforum.de/index.php)
-   CSS (http://xhtmlforum.de/forumdisplay.php?f=73)
-   -   Akkordeon Thema wieder zumachen (http://xhtmlforum.de/showthread.php?t=73554)

seerose 29.07.2018 12:57

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

hubert17 30.07.2018 10:43

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">
in
HTML-Code:

<input id="tab-four" type="checkbox" name="tabs2">
ändern, sowie die folgende Zeilen im CSS anpassen.
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);

Gruß
Hubert

seerose 30.07.2018 11:43

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?

basti1012 02.08.2018 01:43

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

wanst 02.08.2018 05:49

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;
    }
  });
}

Einfacher ist das, wenn du jQuery verwendest. Dann wird das ein Einzeiler:
Code:

$('.blue input').click(function(){ $('.blue input').not(this).prop('checked',false); });
Der jQuery-Code ist [jetzt auch] getestet.

cloned 02.08.2018 09:19

Zitat:

Zitat von wanst (Beitrag 552647)
Der jQuery-Code ist ungetestet, weil das CodePen nicht hergab.

Du kannst auf CodePen (und auch jsfiddle, etc.) verschiedene Libraries einstellen. Für Codepen auf "einstellungen" klicken, dort dann unter "Javascript" jQuery auswählen.

wanst 02.08.2018 10:05

Zitat:

Zitat von cloned (Beitrag 552648)
Du kannst auf CodePen (und auch jsfiddle, etc.) verschiedene Libraries einstellen. Für CodePen auf "Einstellungen" klicken, dort dann unter "Javascript" jQuery auswählen.

Hm, weiß ich dooch – aber dann hat Seerose ja gar keine Chance mehr, selbst was zu lernen ;).

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.

wanst 02.08.2018 10:48

PS:
 
Hab das jQuery doch nochmal geprüft und siehe da – war falsch. Hab es aber gleich oben im Originalbeitrag korrigiert.

seerose 07.08.2018 11:00

Zitat:

Zitat von basti1012 (Beitrag 552646)
Also mit JS kann fast alles machen.

willst du das so haben ?
Accordion

Das mit den Link habe ich nicht ganz verstanden. Kuck mal ob das so richtig ist

https://codepen.io/raubaca/pen/PZzpVe
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.

cloned 07.08.2018 11:33

Zitat:

Zitat von seerose (Beitrag 552671)
https://codepen.io/raubaca/pen/PZzpVe
hier ist doch rechts ein Pfeil, darauf hätte ich gerne einen Link, der Pfeil wird

Was heißt "darauf hätte ich gerne einen Link." Einen Link, der auf diesen Pfeil zeigt? Also du hast auf einer Seite einen Link und wenn du diesen anklickst dann springst du genau zu diesem Pfeil? Oder wie?


Alle Zeitangaben in WEZ +2. Es ist jetzt 03:31 Uhr.

Powered by vBulletin® Version 3.8.11 (Deutsch)
Copyright ©2000 - 2019, vBulletin Solutions, Inc.

© Dirk H. 2003 - 2019