[Tutorial - alle Versionen] Index-Module einzeln ein- und ausklappen

Los geht's!

HTML

1. Ruft euer erstes Index-Modul auf.
   
2. Fügt vor dem Titel des Index-Moduls diesen Code ein:

   Code:

   <div id="Pfeil01">

3. Fügt nach dem Titel des Index-Moduls diesen Code ein:

   Code:

   </div>

4. Fügt vor eurem Inhalt im Index-Modul diesen Code ein:

   Code:

   <div id="IM01">

5. Fügt nach eurem Inhalt im Index-Modul diesen Code ein:

   Code:

   </div>

6. Bild zur Veranschaulichung:
   

CSS

Code:

#Pfeil01, #Pfeil02, #Pfeil03 {
  display: inline-block;
  float: right;
  width: 20px;
  height: 20px;
  background-image: urL(https://cdn.icon-icons.com/icons2/692/PNG/512/seo-social-web-network-internet_306_icon-icons.com_61511.png);
  background-size: 100% 100%;
  filter: invert(100%);
}


Code:

#IM01, #IM02, #IM03 {
  display:none;
}

JavaScript

Code:

$(document).ready(function(){
    $("#Pfeil01").click(function(){
        $("#IM01").toggle(500);
    });
 
  $("#Pfeil02").click(function(){
        $("#IM02").toggle(500);
    });
 
  $("#Pfeil03").click(function(){
        $("#IM03").toggle(500);
    });
});

Code:

$("#EUER_ID_vom_Pfeil").click(function(){
        $("#EURE_ID_vom_Inhalt").toggle(500);
    });

Ein- und ausklappen mit und ohne Animation

Code:

$("#EURE_ID_vom_Pfeil").click(function(){
        $("#EURE_ID_vom_Inhalt").toggle(500);
    });