Beispiel:CSS-Selektor-3.html
Aus SELFHTML-Wiki
<!DOCTYPE html>
<html lang="de">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" media="screen" href="./Beispiel:SELFHTML-Beispiel-Grundlayout.css">
<title>Attributspräsenz und -Wert selektieren</title>
<style>
button[aria-expanded] {
border: 2px solid blue;
background: #f0f8ff;
padding: 0.5em 1em;
font-size: 1.5rem;
cursor: pointer;
}
button[aria-expanded="true"] {
background-color: #d0f0d0;
border-color: green;
}
button[aria-expanded="false"] {
background-color: #f8e0e0;
border-color: #c82f04;
}
button[aria-expanded="true"] + #myPopover {
display: block;
}
</style>
</head>
<body>
<h1>Attributspräsenz und -Wert selektieren</h1>
<button id="toggleBtn" aria-expanded="false" aria-controls="content" command="show-popover" commandfor="myPopover">
Show Details
</button>
<div id="myPopover" popover="auto">
<p>Das ist zusätzlicher Inhalt, der sichtbar wird, wenn <code>aria-expanded</code> auf <code>true</code> gesetzt wird.</p>
</div>
<script>
const btn = document.getElementById('toggleBtn');
btn.addEventListener('click', () => {
const expanded = btn.getAttribute('aria-expanded') === 'true';
btn.setAttribute('aria-expanded', String(!expanded));
btn.textContent = expanded ? 'Zeige Details' : 'Schließe Details';
});
</script>
</body>
</html>
