info@netz-gaenger.de       📞 +49 151 / 28859057

Suchergebnisse / Div’s per JQuery-Akkordion-Effekt einblenden

Heutzutage liefert man Suchergebnisse gerne mithilfe von dynamischen Elementen aus. Zum Beispiel mit einem Akkordion-Effekt, bei dem per Javascript oder in folgendem mit JQuery gelöst, das Ergebnis wie ein Akkordion aufschiebt. Wie man das ganz einfach lösen kann, zeige ich hier.

So sieht das Ergebnis aus: https://www.netz-gaenger.de/snippets/akkordion.php

Und so wirds gemacht…

1. Zuerst bindet man eine JQuery-Version im <head>-Bereich ein. Zum Beispiel so:

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.0/jquery.min.js"></script>

2. Dann erstellt man eine Funktion zum Öffnen des Akkordions. Abhängig vom Suchbegriff wird das Div mithilfe des Befehls .slideToggle(„slow“) langsam eingeschoben, welches den gleichen Klassennamen besitzt, wie der Suchbegriff lautet. Groß- und Kleinschreibung wird gleich behandelt.

<script type="text/javascript">

function oeffnen(suchwert){
$('#content > div').hide();
$("."+suchwert.toLowerCase()).slideToggle("slow");
}

</script>

3. Anschließend erstellt man ein kleines Formular um die Suchergebnisse abzufangen und per onclick-Handler an die Javascript-Klasse weiterzugeben.

Zu suchenden Begriff hier eingeben: <input type="text" id="suche" name="suche" /><br />
(Hier sind die Suchbegriffe "München" und "Stuttgart" möglich.)<br />
<a class="open-close" href="#" onclick="oeffnen($('#suche').val())">Open / Close</a>

<div id="content">
<div class="münchen">
<p>münchen: Dein Inhalt kommt hier rein...</p>
</div>
<div class="stuttgart">
<p>stuttgart: Dein Inhalt kommt hier rein...</p>
</div>
</div>

Das war es auch schon…

Hat dir mein Beitrag geholfen?

Klicke auf die Sterne um zu bewerten!

Durchschnittliche Bewertung 0 / 5. Anzahl Bewertungen: 0

Letzte Version vom 23. Februar 2016 von Netzgänger
Jetzt WordPress Newsletter in dein Postfach

Melde dich jetzt für meinen Newsletter an und du erhältst regelmäßig Tipps und Tricks zu WordPress in dein Postfach. Natürlich kannst du ihn jederzeit abbestellen.


Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert.