Klick und ausblenden

[Bernd]

Hallo,

gibt es eine Möglichkeit folgendes umzusetzen. Gehen wir von folgendem Code aus

<section class="rechnungsadressen">
	<h2>Rechnungsadressen</h2>
	<div>
		<img src="" alt=""> Adresse 1
	</div>
	<div>
		<img src="" alt=""> Adresse 2
	</div>
	<div>
		<img src="" alt=""> Adresse 3
	</div>
	<div>
		<img src="" alt=""> Adresse 4
	</div>
	<div>
		<img src="" alt=""> Adresse 5
	</div>
</section>

<section class="ansprechpartner">
	<h2>Ansprechpartner</h2>
	<div>
		<img src="" alt=""> Adresse 2 - Ansprechpartner 1
	</div>
	<div>
		<img src="" alt=""> Adresse 2 - Ansprechpartner 5
	</div>
	<div>
		<img src="" alt=""> Adresse 3 - Ansprechpartner 2
	</div>
	<div>
		<img src="" alt=""> Adresse 5 - Ansprechpartner 1
	</div>
</section>

Wenn ich z.b. auf Adresse zwei klicke möchte ich unten nur noch die Ansprechpartner sehen wie zu dieser Adresse passen. Meine Idee war irgendwas mit Data-Attribute und CSS oder jQuery? Wäre ich da auf dem richtigen Weg? Ich möchte eben kein Seiten-Reload es müsste nur temporär ausgeblendet werden.

Die Frage ist halt, wie blende ich wieder alle ein? Wie würdet ihr vorgehen?

[Linuchs]

ich habe Folgendes verstanden:

In einem Container möchtest du alle Adressen sehen und darunter pro Adresse ein Container mit allen Ansprechpartnern dieser Adresse.

<div id="adressen">...</div>

<div class="ansprechpartner" id="adresse1">...</div>
<div class="ansprechpartner" id="adresse2">...</div>

Wenn du nun auf eine Adresse klickst, sollen alle Ansprechpartner ausgeblendet werden, ausgenommen die, die zur geklickten Adresse gehören.

function zeigeEinenAnsprechpartner( nr ) {
  var obj = document.getElementsByClassName("ansprechpartner");
  for ( let i=0; i<obj.length; i++ ) {
    obj[i].style.display = "none"; // alle ansprechpartner aus
  }
  document.getElementById("adresse" +nr ).style.display = "block"; // einschalten
}

Um weder alle Ansprechpartner zu zeigen:

function zeigeAlleAnsprechpartner() {
  var obj = document.getElementsByClassName("ansprechpartner");
  for ( let i=0; i<obj.length; i++ ) {
    obj[i].style.display = "block"; // alle ansprechpartner ein
  }
}

nicht getestet.

ihikh (ich hoffe ich konnte helfen), Linuchs

[pl]

Es gibt mehrere Möglichkeiten. Man könnte einmal die Detaildaten alle schon im Browser haben um sie wahlweise ein~ oder auszublenden. Oder die Details werden nachgeladen. MFG

[Gunnar Bittersmann]

@@Bernd

Wenn ich z.b. auf Adresse zwei klicke möchte ich unten nur noch die Ansprechpartner sehen wie zu dieser Adresse passen.

Du willst filtern.

Da empfehle ich die Lektüre von Kapitel 7 „A Filter Form“ in Adam Silvers Buch „Form Design Patterns“.

LLAP 🖖

[pl]

Btw @Gunnar Bittersmann

„Es gibt, zehn, fünfzehn sehr gute Schriften, mit denen man sich anfreunden kann. Es gibt 30.000 auf dem Markt, davon kann man 29.900 im Stillen Ozean versenken, ohne Kulturschaden anzurichten.“

Kurt Weidemann.

[Rolf B]

Hallo Bernd,

diese Idee ist nur sinnvoll, wenn zwischen Adressen und Ansprechpartnern eine m:n Beziehung besteht.

Wenn Adresse : Ansprechpartner eine 1:n Beziehung ist, listest man sinnvollerweise die Ansprechpartner unter der Adresse auf.

Wenn Adresse : Ansprechpartner eine n:1 Beziehung ist, listest man sinnvollerweise zuerst die Ansprechpartner und pro Ansprechpartner die Adressen auf. Wenn man das nicht will, okay, dann kann man die m:n Lösung auch hier umsetzen.

Um das als Client-Lösung umzusetzen, brauchst Du im Client eine geeignete Repräsentation der Ansprechpartner, die zu einer Adresse gehören. D.h. jedes Ansprechpartner-DIV (die vielleicht besser eine Liste wären?) braucht eine id. Und an jeder Adresse bringst Du in einem data-Attribut die ids der Ansprechpartner unter, die zu dieser Adresse gehören. Schön kommasepariert, damit sie als CSS Selektor dienen können.

Du brauchst auch eine visuelle Darstellung, welche Adresse es gerade ist, zu der Du die Ansprechpartner auflistest. Und diese Darstellung muss natürlich auch zugänglich sein, d.h. einfach umfärben reicht nicht. Ich habe mal das aria-selected Attribut verwendet. Ob das richtig ist, weiß ich nicht. aria-current passt jedenfalls noch schlechter.

Ich hab mal was gebastelt

Vermutlich ist das bezüglich Bedienbarkeit noch suboptimal. Die data-anspr Attribute baust Du beim Ausgaben des HTML passend im PHP auf, so dass da eine Selektorenliste liegt, die Du ohne weitere Mühe an jQuery übergeben kannst.

Rolf