Jeden skrypt dla wielu elementów

0

Wiatm,
Mam problem z poprawnym napisaniem skryptu na stronie, skrypt ma odpowiadać za zwijanie i rozwijanie tekstu w blokach na stronie.

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>title</title>
  <link rel="stylesheet" href="style.css" type="text/css">
  </head>
  <body>
	<div class="ramka">
		<div class="tekst">
		<p>sample text</p>
		</div>
		<a href="#" class="button">click</a>
	</div>
	<div class="ramka">
		<div class="tekst">
			<p>sample text</p>
		</div>
		<a href="#" class="button">click</a>
	</div>

  <script src="jquery-3.3.1.min.js"></script>
  <script src="js.js"></script>
  </body>
</html>

na początku próbowałem zrobić to w ten sposób:

$('.button').on('click',function(){
$('.tekst').slideToggle(slow)
})

Efekt był taki ze wszystkie ramki aktywowały sie po kliknięciu dowolnego przycisku więc próbowałem zmodyfikować, kod niestety potrzebuje pomocy. poniżej aktualny kod

$(document).ready(function() {
	var frame = document.getElementByClassName('ramka');
	frame = toggleEvent();

});

function toggleEvent(){

	this._button = document.getElementByClassName('button');
	this._cont = document.getElementByClassName('tekst');

	$(button).on("click",function(){
		$(this._cont).slideToggle(slow);
	})
	

};
1 
$('.button').on('click',function(){
    $('.tekst').slideToggle(slow)
})

To jest selektor dla klasy. Teraz zaznaczasz wszystkie elementy które mają klasę tekst. A że masz ich kilka, to i akcja jest dla kilku wywoływana ;)
Możesz na przykład wybrać klasę tekst, ale najbliższą przyciskowi który został wciśnięty, a nie wszystkie. Będzie działać :)

0

Jakieś wskazówki jak to zrobić?

0

https://api.jquery.com/closest/ na przykład.

1 
$(document).ready(function() {
	toggleEvent();
});

function toggleEvent(){

	$('.button').on('click',function(){
	$(this).prev().slideToggle('slow')
})	
};

tak mi sie udało

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