zurück zur Startseite
  


Zurück XHTMLforum > (X)HTML und CSS > CSS
Seite neu laden Akkordeon Thema wieder zumachen

Antwort
 
LinkBack Themen-Optionen Ansicht
  #1 (permalink)  
Alt 29.07.2018, 13:57
Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 07.10.2014
Beiträge: 88
seerose befindet sich auf einem aufstrebenden Ast
Standard 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)
Mit Zitat antworten
Sponsored Links
  #2 (permalink)  
Alt 30.07.2018, 11:43
Erfahrener Benutzer
XHTMLforum-Mitglied
 
Registriert seit: 06.06.2006
Beiträge: 188
hubert17 befindet sich auf einem aufstrebenden Ast
Standard

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
Mit Zitat antworten
Sponsored Links
  #3 (permalink)  
Alt 30.07.2018, 12:43
Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 07.10.2014
Beiträge: 88
seerose befindet sich auf einem aufstrebenden Ast
Standard 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?
Mit Zitat antworten
  #4 (permalink)  
Alt 02.08.2018, 02:43
Benutzerbild von basti1012
Erfahrener Benutzer
XHTMLforum-Mitglied
 
Registriert seit: 23.01.2018
Beiträge: 184
basti1012 befindet sich auf einem aufstrebenden Ast
Standard

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
Mit Zitat antworten
  #5 (permalink)  
Alt 02.08.2018, 06:49
Neuer Benutzer
neuer user
 
Registriert seit: 25.03.2015
Beiträge: 4
wanst befindet sich auf einem aufstrebenden Ast
Standard 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.

Geändert von wanst (02.08.2018 um 11:46 Uhr) Grund: Syntaxkorrektur
Mit Zitat antworten
  #6 (permalink)  
Alt 02.08.2018, 10:19
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 30.01.2014
Beiträge: 2.247
cloned ist ein wunderbarer Anblickcloned ist ein wunderbarer Anblickcloned ist ein wunderbarer Anblickcloned ist ein wunderbarer Anblickcloned ist ein wunderbarer Anblickcloned ist ein wunderbarer Anblickcloned ist ein wunderbarer Anblick
Standard

Zitat:
Zitat von wanst Beitrag anzeigen
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.
Mit Zitat antworten
  #7 (permalink)  
Alt 02.08.2018, 11:05
Neuer Benutzer
neuer user
 
Registriert seit: 25.03.2015
Beiträge: 4
wanst befindet sich auf einem aufstrebenden Ast
Standard

Zitat:
Zitat von cloned Beitrag anzeigen
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.
Mit Zitat antworten
  #8 (permalink)  
Alt 02.08.2018, 11:48
Neuer Benutzer
neuer user
 
Registriert seit: 25.03.2015
Beiträge: 4
wanst befindet sich auf einem aufstrebenden Ast
Standard PS:

Hab das jQuery doch nochmal geprüft und siehe da – war falsch. Hab es aber gleich oben im Originalbeitrag korrigiert.
Mit Zitat antworten
  #9 (permalink)  
Alt 07.08.2018, 12:00
Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 07.10.2014
Beiträge: 88
seerose befindet sich auf einem aufstrebenden Ast
Standard

Zitat:
Zitat von basti1012 Beitrag anzeigen
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.
Mit Zitat antworten
Sponsored Links
  #10 (permalink)  
Alt 07.08.2018, 12:33
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 30.01.2014
Beiträge: 2.247
cloned ist ein wunderbarer Anblickcloned ist ein wunderbarer Anblickcloned ist ein wunderbarer Anblickcloned ist ein wunderbarer Anblickcloned ist ein wunderbarer Anblickcloned ist ein wunderbarer Anblickcloned ist ein wunderbarer Anblick
Standard

Zitat:
Zitat von seerose Beitrag anzeigen
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?
Mit Zitat antworten
Sponsored Links
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
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


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