jQuery - harmonijka

0

Witam, mogłby ktoś pomóc mi to zoptymalizować?

$('#Show1').click(function(){
   $('#Hidden1').toggle();
	$('#Show1').toggleClass('section9-list-item2');
});
$('#Show2').click(function(){
   $('#Hidden2').toggle();
	$('#Show2').toggleClass('section9-list-item2');
});
$('#Show3').click(function(){
   $('#Hidden3').toggle();
	$('#Show3').toggleClass('section9-list-item2');
});
$('#Show4').click(function(){
   $('#Hidden4').toggle();
	$('#Show4').toggleClass('section9-list-item2');
});
$('#Show5').click(function(){
   $('#Hidden5').toggle();
	$('#Show5').toggleClass('section9-list-item2');
});
$('#Show6').click(function(){
   $('#Hidden6').toggle();
	$('#Show6').toggleClass('section9-list-item2');
});
$('#Show7').click(function(){
   $('#Hidden7').toggle();
	$('#Show7').toggleClass('section9-list-item2');
});
$('#Show8').click(function(){
   $('#Hidden8').toggle();
	$('#Show8').toggleClass('section9-list-item2');
});

I jak zrobić, żę po kliknięciu w Show1, a potem w Show2 to Hidden2 się otworzy, a Hidden1 już zamknie?

0

Nie pokazałeś jak wygląda kod html ale załóżmy, że mamy coś takiego:

<div class="accordion">
    <div class="header"> <-- klikalny nagłówek 1 --> </div>
    <div class="body"> <-- zawartość strony 1 --> </div>
</div>
<div class="accordion">
    <div class="header"> <-- klikalny nagłówek 2 --> </div>
    <div class="body"> <-- zawartość strony 2 --> </div>
</div>
<div class="accordion">
    <div class="header"> <-- klikalny nagłówek 3 --> </div>
    <div class="body"> <-- zawartość strony 3 --> </div>
</div>

Wtedy, można by zrobić tylko jedną funkcję odpowiedzialną za kliknięcie w którykolwiek nagłówek która schowa wszystkie 'ciała'.

$('.header').click(function(){
    $('.body').hide();
    var $this = $(this);
    // dalszy kod
});

Dalej powinieneś wykorzystać zmienną $this aby dostać się do elementu z klasą body.
$this jest uchwytem do klikniętego nagłówka. A żeby dostać się do elementu z klasą body będziesz musiał skorzystać z np. funkcji parent / children / find:
http://api.jquery.com/parent/
http://api.jquery.com/children/
http://api.jquery.com/find/
I po prostu wyświetlić go za pomocą show. Dzięki temu nawet jak dodamy nowe elementy do harmonijki nie trzeba będzie edytować pliku z JSem.

Albo po prostu skorzystać z jednej z gotowych bibliotek. :)
http://getbootstrap.com/javascript/#collapse-example-accordion
https://jqueryui.com/accordion/

1 użytkowników online, w tym zalogowanych: 0, gości: 1