JSFiddle - React, Tailwind, and code Playground
HTML
<section id="adressen">
<h2>Adressen</h2>
<p>
Klicken Sie auf eine Adresse, um nur die Anprechpartner für diese Adresse zu sehen.
</p>
<button data-anspr="#ansp-1,#ansp-47">Demoweg 17, 12345 Dingenskirchen</button>
<button data-anspr="#ansp-99">Zur Mühle 3, 54321 Wasserau</button>
<button data-anspr="#ansp-47,#ansp-99">Hauptstr. 4711, 50000 Köln</button>
<button data-anspr="#ansp-1,#ansp-99">Fooweg 7, 10000 Baringen</button>
<button data-anspr="#ansp-75">Waterkant 3, 27000 Braverhemen</button>
<button>Alle Ansprechpartner zeigen</button>
</section>
<section id="ansprPartner">
<h2>Ansprechpartner</h2>
<div id="ansp-1">Demosthenes Ekklesiastis</div>
<div id="ansp-47">Anton Schmitz</div>
<div id="ansp-75">Katherina Eselle Hahner</div>
<div id="ansp-99">Sigmund Müller</div>
</section>
CSS
#adressen button {
padding: 0.3em 0.5em;
margin: 0.2em;
display: block;
width: 30em;
border: none;
text-align: left;
background-color: #dda;
}
#adressen button:active {
background-color: #ffa;
}
#adressen button:last-child {
margin-top: 1em;
}
#adressen button[aria-selected] {
background-color: #faa;
}
JavaScript
$("#adressen").click(function(e) {
// e.target ist der geklickte Button
var anspr = e.target.dataset.anspr;
if (anspr) {
// Erstmal alle Ansprechpartner verstecken
$("#ansprPartner div").hide();
$("#adressen button").removeAttr("aria-selected");
// Neue Selektion aktivieren
$einträge = $(anspr);
hasAnspr = ($einträge.length > 0);
if (hasAnspr) {
e.target.setAttribute("aria-selected", true);
$einträge.show();
}
// ansprPartner section nur anzeigen wenn jemand gefunden wurde
$("#ansprPartner").toggle(hasAnspr);
} else {
// Button ohne data-anspr: Alle anzeigen
$("#ansprPartner").show();
$("#ansprPartner div").show();
}
});