Akkordeon

Um ein Akkordeon zu erstellen, gibt es viele Möglichkeiten. Ich habe eine Variante gewählt, die auch dann funktioniert, wenn beliebig viele Text-Sections vorhanden sind. Das Skript muss also nicht angepasst werden, selbst wenn es zehn oder mehr Sections sind.
Schauen wir uns den Code genauer an:
Mit einer while-Schleife weise ich jedem "Pfeil" <div id="pf_1" class="akkord-pfeil"> rechts neben der Überschrift ein Click-Event zu. Das ließe sich auch mit forEach() lösen, aber ich arbeite hier lieber mit der while-Schleife: 
let secElem  = '';
let secCount = 0;
while( secElem = document.querySelectorAll( 'section' )[ secCount ] ) {
	// hier mache ich den jeweiligen Pfeil ausfindig
	let pfElem = secElem.querySelector('.akkord-pfeil'); 
	// hier die Eventzuweisung
	pfElem.addEventListener('click', function(){
		akkordeon(this.id); // die eigene id übergeben
	});
	secCount++;
}
Die Funktion akkordeon( id ) arbeitet mit toggle(). Das kann man natürlich anders lösen, aber für mich hat es in diesem Fall gut gepasst. Dabei werden den Elementen die Klassen show und roat-pf zum Öffnen und Schließen zugewiesen oder wieder entfernt.
Wichtig ist, dass die zuletzt geöffnete Section gespeichert wird. Wird eine andere Section angeklickt, muss die vorherige wieder einklappen. Den Rest übernimmt toggle():
pfeilIdTemp = pfeilId;
sectionIdTemp = sectionId; 
if( sectionIdTemp != sectionId && sectionIdTemp != null ) {
	document.getElementById( pfeilIdTemp ).classList.remove( 'roat-pf' );
	document.getElementById( sectionIdTemp ).classList.remove( 'show' );
	document.getElementById( sectionIdTemp ).style.height = sectionHeight;
}

Noch kurz zu split():
Kurz erklärt, id.split( '_' ) zerlegt einen String nach dem gesuchtem Begriff "_" und liefert das Ergebnis in einem Array zurück.
In unserem Fall z.B.: <section id=" section_1 "> let myInt = id.split( '_' ); würde myInt ein Array darstellen mit 2 Werten:
myInt[0] = 'section';
myInt[1] = '1';
Und die Ziffer myInt[1] = '1'; benötige ich im Verlauf meines Skriptes.

Wenn Ihr Anregungen oder Kommentare zu dem Thema habt, seid so nett und kontaktiert mich unter: Kontakt

Kopiert Euch gerne den Code und probiert es aus: Code
Beispiel
Header für Absatz 1
>

Der flinke Frosch Friedrich fraß freitags fröhlich fünf frische Fruchtfliegen und fragte danach feierlich, ob vielleicht jemand für ihn einen Fluss mit mehr Fischen und weniger Stress reservieren könne. Die Gänse gackerten gelassen, während die Katze Karla kopfschüttelnd auf dem Zaun saß und sich dachte, dass dieser Frosch eindeutig zu viel Freizeit habe. Im Hintergrund klingelte ein Wecker, der eigentlich niemandem gehörte, und ein Keks fiel vom Tisch, was die Stimmung sofort als dramatisch, aber dennoch köstlich beschreiben ließ. Dabei wusste natürlich niemand so genau, warum.

Header für Absatz 2
>

Der flinke Frosch Friedrich fraß freitags fröhlich fünf frische Fruchtfliegen und fragte danach feierlich, ob vielleicht jemand für ihn einen Fluss mit mehr Fischen und weniger Stress reservieren könne. Die Gänse gackerten gelassen, während die Katze Karla kopfschüttelnd auf dem Zaun saß und sich dachte, dass dieser Frosch eindeutig zu viel Freizeit habe.

Header für Absatz 3
>

Der flinke Frosch Friedrich fraß freitags fröhlich fünf frische Fruchtfliegen und fragte danach feierlich, ob vielleicht jemand für ihn einen Fluss mit mehr Fischen und weniger Stress reservieren könne. Die Gänse gackerten gelassen, während die Katze Karla kopfschüttelnd auf dem Zaun saß und sich dachte, dass dieser Frosch eindeutig zu viel Freizeit habe.


Code 

HTML:

<div class="akkord-wrapper">
	<section id="section_1" class="section">
		<div id="head_1" class="akkord-head-wrapper">
			<div class="akkord-header">
				Header für Absatz 1
			</div>
			<div id="pf_1" class="akkord-pfeil">
				>
			</div>
		</div>
		<p id="paragraph_1" class="akkord-text">
			Der flinke Frosch Friedrich fraß freitags 
			...
		</p>
	</section>			
	<section id="section_2" class="section">
		<div id="head_2" class="akkord-head-wrapper">
			<div class="akkord-header">
				Header für Absatz 2
			</div>
			<div id="pf_2" class="akkord-pfeil">
				>
			</div>
		</div>
		<p id="paragraph_2" class="akkord-text">
			Der flinke Frosch Friedrich fraß freitags 
			...
		</p>
	</section>
	<section id="section_3" class="section">
		<div id="head_3" class="akkord-head-wrapper">
			<div class="akkord-header">
				Header für Absatz 3
			</div>
			<div id="pf_3" class="akkord-pfeil">
				>
			</div>
		</div>
		<p id="paragraph_3" class="akkord-text">
			Der flinke Frosch Friedrich fraß freitags 
			...
		</p>
	</section>
</div>






CSS:

.akkord-wrapper{
	width:100%;
	height:auto;
}

.section{
	height:35px;
	overflow:hidden;
	margin:10px 0;
	transition: height .5s;
}
.show{
	height:0px;
	transition: height .5s;
}

.akkord-head-wrapper{
	border-radius:5px 0 5px 0;
	border:2px solid rgba(112, 175, 4, 1);
	background: linear-gradient(4deg, 
	rgba(112, 175, 4, 1) 0%, 
	rgba(0,75,64, 1) 50%, 
	rgba(32,167,77,1) 100%);
}

.akkord-pfeil, .akkord-header{
	display:inline-block;
}

.akkord-header{
	padding:3px;
}

.akkord-pfeil {
    padding: 5px;
    float: right;
    font-weight: 900;
	cursor:pointer;
	transform: rotate(0deg);
    transition: transform .5s;
}
	.roat-pf{
		transform: rotate(90deg);
		transition: transform .5s;	
	}

p.akkord-text {
    position: relative;
    top: 0px;
    margin: 0;
    padding: 5px;
    width: 96%;
    height: auto;
	border:1px solid white;
    clear: right;
}






JavaScript:

// Nur wenn Section mit der ID vorhanden ist
if(document.querySelector('#section_1')){
	
	// Dynamische Zuweisung des Click-Events über while()
	// Solange das TAG section vorhanden 
	let secElem  = '';
	let secCount = 0;
	while( secElem = document.querySelectorAll('section')[secCount] ) {
		
		// unter der section befindliches Element  
		// mit der Klasse "akkord-pfeil" 
		let pfElem = secElem.querySelector('.akkord-pfeil');
		pfElem.addEventListener('click', function(){
			// Zuweisung Funktionsaufruf 
			// Übergabe -> eigene id  
			akkordeon(this.id);
		});
		secCount++;
	}

	// Akkordeon 
	let pfeilIdTemp = null; // Temp Pfeil-ID 
	let sectionIdTemp = null; // Temp Section-ID 
	let sectionHeight = 35+'px'; // Höhe eingefahren 
	function akkordeon(id) {
		
		// Benötigte ID's zusammenbauen 
		let myInt = id.split('_');
		let pfeilId = 'pf_'+myInt[1];
		let sectionId = 'section_'+myInt[1];

		// Wenn schon eines ausgefahren ist und  
		// eine andere Section ausgefahren werden soll muss  
		// die letze Section wieder eingefahren werden 
		if( sectionIdTemp != sectionId && sectionIdTemp != null ) {
		 document.getElementById(pfeilIdTemp).classList.remove('roat-pf');
		 document.getElementById(sectionIdTemp).classList.remove('show');
		 document.getElementById(sectionIdTemp).style.height = sectionHeight;
		}
		
		// ID's merken
		pfeilIdTemp		= pfeilId;
		sectionIdTemp	= sectionId;
		
		// Elemente zuweisen
		const section = document.getElementById(sectionId);
		const pf	= document.getElementById(pfeilId);
		
		// Ausfahren der Section und Pfeil drehen
		section.classList.toggle('show');
		pf.classList.toggle('roat-pf');

		// Wenn die Klasse 'show' gefunden 
		// die Höhe der Section auslesen und zuweisen
		if ( section.classList.contains( 'show' ) ) {
			// + 5 zur Sicherheit
			section.style.height = (section.scrollHeight+5) + 'px';
			
		} else {
			// die Höhe auf 25px setzen
			section.style.height = sectionHeight;
		}
		return true;
	}
}