JS-Akkordeon Tutorial

An dieser Stelle eine kleine Anleitung, wie die Akkordeon-Elemente auf der Startseite gemacht wurden.

 

Basiswissen: 

 

Skript für Akkordeon (Head-Bereich)

<script type="text/javascript">

    function show(id) {
     if (document.getElementById(id).style.display=='block') {
         document.getElementById(id).style.display='none'; }

     else {
         document.getElementById(id).style.display='block'; }
    }

</script>

 

CSS für Carets  (Head-Bereich)

ID = Element für Akkordeon-Content 

<link href="//netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css" rel="stylesheet" type="text/css" />

 

<style "type="text/css">

#ID { display: none; } 

</style>

 

 ...oder für mehrere Elemente

<style "type="text/css">

#ID1, #ID2, #ID3, ..., #IDn { display: none; } 

</style>

 

Auslösendes Element (html) 
ID = Element für Akkordeon-Content 

<h3>

  <a style="text-decoration:none; color: rgb(43, 109, 183);"
  class="fa fa-caret-square-o-down fa-1x" href="javascript:show('ID')">
    <span class="ml10 font">Weitere Infos zum 
Buch...</span>
  </a>

</h3>

 

Damit das Akkordeon funktioniert, muss in den Skripten die 'ID' des Elements eingesetzt werden, das den Inhalt des Akkordeons bilden soll (zB: #cc-m-13090630936). 

Um die ID von Jimdo-Elementen zu finden, bitte diese Anleitung lesen!

 

Hinweis: Bitte die mit * gekennzeichneten Felder ausfüllen.

Hinweis: Bitte die mit * gekennzeichneten Felder ausfüllen.


 

Falls Ihr mit der Anleitung nicht zurecht kommen solltet, sendet mir bitte eine mail über das Kontaktformular auf der Seite "Kontakt"