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…

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.


4 Kommentare

  1. Kai sagt:

    Ich kann meinen Vorredner nur zustimmen, toller Effekt! Danke für den fertigen Code!

    LG Kai

  2. Tach, erst einmal, sehr schöner Blog und tolles Webdesign…:) ich habe deinen Blog auf meiner aktuellen DoFollow Blogliste Oktober 2013 unter http://www.kreativmoneten.de/dofollow-blog-liste-stand-oktober-2013/ eingetragen 🙂 Ich hoffe das ist in Ordnung 🙂 p.s. Natürlich würde ich mich über einen Kommentar auf meinem Blog freuen 🙂 Liebe Grüße vom Bodensee Kevin

  3. Danke für den tollen Effekt.
    Vorallem Super das du immer den fertigen Code zur Verfügung stellst, da muss ich meinem Vorredner zustimmen.
    Viel Ahnung habe ich von jQuery noch nocht, aber von JavaScript schon ein wenig, da werd ich mich bestimmt reinfuchsen können.

    LG

  4. Sehr schicker Effekt! Kann sich echt sehen lassen!
    Vielen Dank für den Quellcode, jetzt hat sich das jQuery lernen doch noch bezahlt gemacht 😛

    Grüße Jan

Kommentar schreiben

Mit Absenden deines Kommentars erklärst du dich mit der Verarbeitung deiner hier angegebenen Daten einverstanden (Datenschutzerklärung). Diese werden nur zur Verwaltung der Kommentare verwendet und keinem anderen Zweck zugefügt. Du kannst jederzeit per E-Mail an info@netz-gaenger.de der Speicherung deiner Daten widersprechen.

* Notwendige Angaben

Netzgänger Webdesign | Rohrersmühlstraße 22 in Schwabach | Bayern
Kontakt: info@netz-gaenger.de
↑ oben
Inhalt