Jo Klimek: Verbesserung zum Wiki-Artikel „Akkordeon mit details“

Beitrag lesen

SELF-Forum

Verbesserung zum Wiki-Artikel „Akkordeon mit details“

Jo Klimek Homepage des Autors (Versionen)
– Informationen zu den Bewertungsregeln

problematische Seite

Betr: https://wiki.selfhtml.org/wiki/Infobox/Akkordeon_mit_details#Registerkarten

Gute Nachricht: Das name-Attribut geht jetzt in allen modernen Browsern (Caniuse) - wir brauchen also gar kein JavaScript mehr.

Hallo zusammen.

Das Problem hier: Klickt man zweimal auf das Summary-Element verschwindet der Kontext. Das entspricht nicht der Funktion von Registern! Warum als nicht zwei zusätzliche Zeilen Javascript (ist gleichzeitig Fallback).

Safari kennt 'list-style:none' nicht.

Ohne weiteres Zutun zeigt der Cursor auf dem Summary-Element nur den normalen Zeiger (zumindest bei meinem FF).

Ich habe das Beispiel überarbeitet:

<!DOCTYPE html>
<html>
<head>
  <title>Tabs mit Details-Element</title>	
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <style>
  
.tabs {
	margin:0px;
	font:normal 1em sans-serif;
	position: relative;
	min-height: 15em;
	width: 40em;
}

.tabs details {
	display: inline-block;
}
  
.tabs summary {
	background-color: lightgrey;
	border: thin solid black;
	border-radius: .5em .5em 0 0;
	list-style:none;
	height:20px;
	cursor:pointer;
	padding: .5em .5em 10px;
}

/*	forces 'Safari' to hide Marker 	*/
.container summary::-webkit-details-marker {
  display: none;
}

.tabs summary:focus,
.tabs summary:hover {
	background-color: silver;
}

.tabs details[open] > summary {
	background: white;
	color:#888;
	border-bottom-color:white;
	cursor:default;
}

.tabs .content {
	position: absolute;
	left: 0;
	top:39px;
	background: white;
	border: thin solid black;
	border-radius:0 .5em .5em;
	padding: .5em;
	z-index:-1;
}  
  </style>
</head>
<body>
<div class="tabs">
	<details name="tab" open>
		<summary> Registerkarten</summary>
		<div class="content">
			<p>Unter <strong>dynamischen Tabs</strong> (engl. <em>Tabbed interfaces</em> oder
				<em>Tab Panels</em>) versteht man das Präsentieren von Inhalten in Registerkarten.
				Reiter wie in einer Hängeregistratur verweisen auf die vorhandenen Registerkarten.
				Da nur die ausgewählte Registerkarte angezeigt wird, ist dies eine platzsparende,
				übersichtliche und visuell intuitive Art Inhalte zu präsentieren.</p>
		</div>
	</details>
	<details name="tab">
		<summary> Standardverhalten</summary>
		<div class="content">
			<p>Wenn Sie mehrere details-Elemente über ein gemeinsames name-Attribut verbinden,
				werden beim Öffnen eines details-Elements bereits geöffnete details-Elemente
				ohne weiteres Zutun geschlossen.</p>
			<p>Dies funktioniert (Stand: September 2024) in allen modernen Browsern.</p>
		</div>
	</details>
	<details name="tab">
		<summary> Barrierefreiheit </summary>
		<div class="content">
			<p>Registerkarten müssen von allen bedienbar sein: egal ob durch Touch, mit der Maus,
				aber auch mit der Tastatur - z.B. mit der Tab-Taste .</p>
			<p>Alles kein Problem mit dem details-Element!</p>
		</div>
	</details>
</div>
<script type="text/javascript">
(function(){
	var tabs = document.querySelector('.tabs');
		tabs.addEventListener('click' , toggler);

	function toggler(event){
		let target = event.target.closest('details');
		tabs.querySelectorAll('details').forEach(elm => {
							if(elm !== target){
								elm.open = false;
							} else {
								elm.open = true;
								event.preventDefault();
							};
						}); 
	}
})()
</script>
</body>
</html>
Antwort verfassen Antwort mit Zitat verfassen Beitrag melden
–
Informationen zu den Bewertungsregeln