Rozwijana galeria

Question

Witam. Chciałbym zrobić galerię taką, że mam np. 20 zdjęć z czego pokazują się tylko 4 i po kliknięciu w jakiegoś plusa pokazuje się reszta zdjęć. Czy jest to wykonalne? Jeżeli tak, to jak mogę to zrobić? Korzystałem z takiego skryptu ale coś nie działczy jak zwykle u mnie. Dałem te zdjęcia w display: none; a klasę active w display: block;

<script src="https://code.jquery.com/jquery-3.3.1.js"></script>
<script type="text/javascript">
$(document).ready(function(){
	$('#idprzycisku').click(function(){
		$('#idzdjec').toggleClass('active');
})
})
</script>

 Najlepiej by było, gdybym mógł zrobić to tylko w css/html/js bez bootstrapa i innych skomplikowanych programow :D Pozdrawiam

Answer 1

1. Usuń linijke z $(document).ready. 

$(document).ready(function(){
    $('#idprzycisku').click(function(){
        $('#idzdjec').toggleClass('active');
})
})

2. Pamiętaj, żeby wstawiać średniki za tymi zamkniętymi otwartymi nawiasami :^)
3. Sprawdź to w takiej formie:

$('#idprzycisku').click(function(){
        $('#idzdjec').toggleClass('active');
});

 

Comments

Dziękuję bardzo za odpowiedź :)

Answer 2

Ten kod wydaje się być ok.

Dla porządku w kodzie lepiej  używaj średników na końcach instrukcji.

$(document).ready(); jednak bym zostawił, nie wiadomo gdzie w przyszłości powędruje Twój skrypt. A może już jest w head.

Może coś z resztą nie tak.

Comments

Dziękuję :)

Answer 3

Tutaj masz w javascript to napisane. Do tego nie jest konieczne jQuery.

https://codepen.io/arces92/pen/QVBNpL

P.S.

 

Nie wiem czemu w swoim przykładzie masz toggleClass, jeżeli piszesz o tym, że zdjęcia mają się tylko pojawiać po kliknięciu.

Comments

Dziękuję :)