find-templates

akkordeon

zurück zur Übersicht

Akkordeon-Effekt mit jQuery

den Effekt mit CSS3 habe ich hier wieder verworfen, stattdessen habe ich die jQuery-Lösung für den Baukasten angepasst. Klicke mit der Maus die Titel an:



Überschrift 1

Hier der Platz für Texte, Bilder oder auch Videos (siehe Überschrift 2 und 3). Oder man bietet hier Codes zum kopieren an (siehe Überschrift 4).

Die Box passt sich (in der Höhe) immer dem Inhalt an. Die Breite kann im CSS-Code (erste Codezeile #akkordeon) angepasst werden.

Überschrift 2

flensburg

Überschrift 3

Überschrift 4

oder für Codes zum kopieren:

body {
  background-color: #FFFFFF;
  background-image: url(Grafikadresse);
  background-repeat: no-repeat;
  background-attachment: fixed; }

Die Breite und Farben sind anpassbar. Kann auch beliebig erweitert werden.

Schritt 1: Der CSS-Code

  • mit dem CSS-Code bekommen Felder und Überschriften ihr Aussehen
  • den CSS-Code können wir mit im Seiteninhalt einfügen
  • auf "Eigene Seiten editieren" und gewünschte Seite auswählen
  • im Editor (Werkzeugleiste) oben links auf "Quellcode" klicken
  • zu Beginn (als erstes) dann folgenden Code einfügen

hier CSS-Code:

<style type="text/css">
<!--

/* Hier die Breite anpassen */
#akkordeon {
  width: 500px;
  overflow: hidden; }

/* Aussehen Titel */
#akkordeon h2 {
  font-size: 14px;
  color: #ffffff;
  background: url(https://img.webme.com/pic/f/find-templates/rechts.png) no-repeat right; }

/* Feld um Titel */
.thema {
  cursor: pointer;
  padding: 5px 10px 5px;
  margin-bottom: 5px;
  transition: all .2s ease-in-out; }

/* ausklappbare Feld mit Inhalt */
#akkordeon .inhalt {
  display: none;
  background-color: #ffffff;
  padding: 15px;
  margin-bottom: 5px;
  overflow: hidden;
  border: 1px solid #c9c9c9; }

/* Farbe Titelfeld wenn ausgeklappt */
#akkordeon .open { background-color: #6ca02f!important; }

/* Grafik rechts wenn ausgeklappt */
#akkordeon .open h2 {
  background: url(https://img.webme.com/pic/f/find-templates/unten.png) no-repeat right; }

-->
</style>


Schritt 2: Der Javascript-Code

  • mit dem Javascript-Code wird das Ein + Ausklappen ermöglicht
  • diesen fügen wir mit im Seiteninhalt ein
  • nach dem CSS-Code, also nach dem --></style>

hier Javascript-Code:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
<script>
$(document).ready(function() {
       
    $('.top .thema').click(function(){
	     	if($(this).hasClass('closed')) { 
	     		$(this).addClass('open').removeClass('closed'); 
	     		$(this).siblings('.inhalt').slideDown(200);
		 	} else {
		 		$(this).addClass('closed').removeClass('open');
		 		$(this).siblings('.inhalt').slideUp(200);
		 	} 
	     });
    
});
</script>



Schritt 3: Der HTML-Code mit dem Inhalt

  • hier passen wir die Überschriften an
  • hier fügen wir gewünschte Inhalte ein
  • ebenfalls mit in den Seiteninhalt einfügen :

hier HTML-Code:

<div id="akkordeon">

<div class="top">
<div class="thema closed" style="background: #003030;"> <h2>Hier Titel 1</h2> </div>
<div class="inhalt"> Hier Inhalt 1 einfügen </div>
</div>

<div class="top">
<div class="thema closed" style="background: #FFA500;"> <h2>Hier Titel 2</h2> </div>
<div class="inhalt"> Hier Inhalt 2 einfügen </div>
</div>

<div class="top">
<div class="thema closed" style="background: #A52A2A;"> <h2>Hier Titel 3</h2> </div>
<div class="inhalt"> Hier Inhalt 3 einfügen </div>
</div>

<div class="top">
<div class="thema closed" style="background: #202020;"> <h2>Hier Titel 4</h2> </div>
<div class="inhalt"> Hier Inhalt 4 einfügen </div>
</div>

</div>

• bei style="background: #202020 kann die Hintergrundfarbe geändert werden
• die Hier Titel ersetze durch gewünschte Überschrift
• ersetze Hier Inhalt einfügen durch gewünschten Inhalt





Heute: 1 Besucher