beatovich: Frage zum Wiki-Artikel „zugängliche Registerkarten“

Beitrag lesen

problematische Seite

hallo

Man hätte hier [in der Tabliste] besser effektiv <button>-Elemente verwenden sollen.

Dann funktioniert das Beispiel ohne JS nicht mehr, oder? Wäre es da nicht sinnvoll, die Gestaltung als Tabbeable Interface per JS überhaupt erst einzuschalten und ohne JS normal untereinander liegende Blockelemente anzuzeigen?

Allerdings hört es dann auch auf, einfach zu sein.

Da ich gerade den Editor offen habe für eine details/summary Version (ohne diese Elemente zu verwenden)

.details {list-style:none; width:20rem; }
.details li {list-style:none; padding: 0 1rem; box-shadow:0px 0px 4px 0px #666; margin: 1rem 0; }
.details button {padding:0 1rem 0 0.5rem; display:block; }
.details button[aria-expanded="true"] + .content {display:block}
.details button[aria-expanded="false"] + .content {display:none}
.details button[aria-expanded="true"]:before {content:"▼ "; }
.details button[aria-expanded="false"]:before {content:"▶ "; }
<ul class="details">
	<li><button aria-expanded="false">Show</button><div class="content"><p>lorem ipsm dolres sunt</p></div></li>
	<li><button aria-expanded="false">Show</button><div class="content"><p>lorem ipsm dolres sunt</p></div></li>
	<li><button aria-expanded="false">Show</button><div class="content"><p>Mit mehr Details...</p>
		<ul>
			<li><button aria-expanded="false">Show</button><div class="content"><p>lorem ipsm dolres sunt</p></div></li>
			<li><button aria-expanded="false">Show</button><div class="content"><p>lorem ipsm dolres sunt</p></div></li>
			<li><button aria-expanded="false">Show</button><div class="content"><p>lorem ipsm dolres sunt</p>
			
			</div></li>
		</ul>
	
	</div></li>
</ul>
document.querySelectorAll(".details").forEach( function(item){
	item.addEventListener(
		"click", 
		function(ev){
			if( ev.target.getAttribute("aria-expanded") == "false" ){
        //soll nur eines der Sybling Elemente offen sein?
        //sonst ausklammern
        ev.target.parentElement.parentElementquerySelectorAll("button")
          .forEach(function(item){item.setAttribute("aria-expanded",false)});
        //
 				ev.target.setAttribute("aria-expanded",true);
			}
			else{
				ev.target.setAttribute("aria-expanded",false);
			}
		}
	);
});

Das Verhalten im JS lässt sich ändern. Man kann dieses Beispiel im CSS zu tabpaneln umgestalten.

--
Neu im Forum! Signaturen kann man ausblenden!