[GELÖST] Javascript und WordPress

[deathNap]

Hallo liebes Forum,

ich sitze gerade an der Erstellung eines Themse für Wordpress.
Nun benötige ich ein script, welches folgende Anforderung erfüllt:

Ich habe eine Liste mit Links und eine Liste mit dazugehörigen Texten.
Klicke ich nun auf einen der Links, soll der dazugehörige Text angezeigt werden und alle anderen ausgeblendet werden. So, dass immer nur ein Text angezeigt wird.

Funktion an sich ist nicht das Problem.
Ich möchte diese Funktion jetzt aber variabel haben. Wird jetzt ein weiterer Link mit einem dazugehörigen Text erstellt, muss natürlich auch eine neue Funktion her.
Ich habe einen Counter in der Liste mit dem ich die Listen-Länge auslesen kann...

Frage: Wie bekomme ich diese Funktion variabel?

function toggle1() {
	var text = document.getElementById("partner-text-1");
			
	if(text.style.display == "block") {
		text.style.display = "none";
	}
	else {
		text.style.display = "block";
		document.getElementById("partner-text-2").style.display = "none";
		document.getElementById("partner-text-3").style.display = "none";
		document.getElementById("partner-text-4").style.display = "none";
		document.getElementById("partner-text-5").style.display = "none";
		document.getElementById("partner-text-6").style.display = "none";
		document.getElementById("partner-text-7").style.display = "none";
	}
}

Ich hoffe ich habe alle nötigen Informationen gegeben.
Vielen Dank im Voraus!

deathNap

 

[Sempervivum]

Wenn Du auf jQuery übergehst, wird es relativ einfach: Die Funktion index() liefert dir den Index des geklickten Elementes in der Liste und mit diesem kannst Du auf die Liste mit den Texten zugreifen und den richtigen anzeigen und die anderen verstecken.

 

[deathNap]

Hallo Sempervivum,
danke für deine Antwort.
Ich bin nun auf jQuery umgestiegen. Die Funktion index() habe ich eingebaut.
Ich habe nun zwei <ul> Listen mit jeweils 14 <li> Elementen. In beiden Listen haben ich die index() Funktion angewandt. Es funktioniert super.

Nun stehe ich aber ehrlich gesagt auf dem Schlauch.
Die jeweiligen Klassen (z.B.: pLink-0 und pText-0) müssen jetzt zusammen arbeiten.
Das heißt der Link soll bewirken, dass der Text ein- bzw. ausgeblendet wird.
Wenn ich das ganze so mache funktioniert das natürlich. Ich hätte es aber gerne variabel sprich die Klasse .pLink soll variabel sein und den dazugehörigen .pText aus- einblenden.

$('.pLink-0').click(function(){
	$('.pText-0').toggle();
});

Ich hoffe du hast da eine Idee für mich. Danke!

Gruß

- - - Aktualisiert - - -

Habe es selbst geschafft. Tolles Gefühl selbst drauf zu kommen! Danke für den Tip mit der index() Funktion!
Code sieht jetzt wie folgt aus:

<script>
$(document).ready(function() {
	$('.partner-text').each(function(index) {
		$(this).addClass('pText-' + index);
	});
		    
	$('.partner-link').each(function(index) {
		$(this).addClass('pLink-' + index);
		$('.pLink-' + index).click(function(){
			$('.partner-text').hide();
			$('.pText-' + index).toggle();
		});
	});
});
</script>

Gruß