W poniższych kodach wyswietlaja mi się dwie belki i pod każdą jest ukryta jeden div z danymi, który otwiera się i zamyka po kliknięciu na belkę nad nim.
Mam dla każdej belki osobno ustawiony kod aby to otwierał. Kod .js jest identyczny jedynie rózni się tym => "5_kolejka" i "2_kolejka. Jak dodam takich kolejek jeszcze 100 to kod będzie ogromny. Jak to zoptymalizować ?
plik .php
<div id="2_kolejka" class="belka_naglowek">
<div style="float: left;">Kolejka 2</div>
<div class="rozwin" style="float: right;">Rozwiń >></div>
<div style="clear: both;"></div>
</div>
<div class="zaw_belka_2">
<div style="width: 100%;">
<div class="tv-yt">
<p style="text-align: center;">Mecz 1</p>
</div>
<div style="clear: both;"></div>
</div>
</div>
<div id="5_kolejka" class="belka_naglowek">
<div style="float: left;">Kolejka 5</div>
<div class="rozwin" style="float: right;">Rozwiń >></div>
<div style="clear: both;"></div>
</div>
<div class="zaw_belka_5">
<div class="tv-yt">
<p style="text-align: center;">Mecz 2</p>
<div style="clear: both;"></div>
</div>
plik .js
$("#2_kolejka").click(function()
{
if (cycle % 2 === 0)
{
$("#2_kolejka > .rozwin").text('Rozwiń >>');
} else
{
$("#2_kolejka > .rozwin").text('Zwiń <<');
}
cycle++;
$(".zaw_belka_2").toggle("slow");
});
$("#5_kolejka").click(function()
{
if (cycle % 2 === 0)
{
$("#5_kolejka > .rozwin").text('Rozwiń >>');
} else
{
$("#5_kolejka > .rozwin").text('Zwiń <<');
}
cycle++;
$(".zaw_belka_5").toggle("slow");
});