Toggling with variables in PHP - php

Question

$last_itteration = false;
while($row = mysqli_fetch_array($result)){
if ($row['egenskaps_navn'] == $last_itteration) {
} else {
echo "<h3>".$row['egenskaps_navn']."</h3>";
}
echo "<span id='verdi_" .$row['verdi_id']."'>".$row['verdi_tekst']."</span><br />";
$last_itteration = $row['egenskaps_navn'];
}
$(document).ready(function(){
$('h3').click(function(){
$('span').toggle();
});
I have collected data from a database. The idea is that I want to toggle values to show from a list of properties (marked h3). The while loop only prints a property if it already hasnt been printed and the connected values. They are currently hidden in the CSS with "span {display: none;}". Now the toggle will only work for all the values and not the connected ones. Is there a similar way to do it in jquery or javascript as i have done it in the PHP code? To select only one property (h3) for toggling since i don't want to toggel them all at once.

Answer 1

Use nextUntil('h3') to toggle everything between the clicked h3 and the next h3:
$('h3').on('click', function() {
$(this).nextUntil('h3').toggle();
});
Here's a fiddle

Answer 2

This triggers the closest span to the h3 clicked
$(document).ready(function(){
$('h3').click(function(){
$(this).next('span').toggle();
});
});
or as billyonecan mentioned:
$(this).nextUntil('h3','span').toggle();
the second argument makes the function select only the spans

Answer 3

Find the next span of the current h3 on click event on h3 and apply the toggle to it. Try with -
$('h3').click(function(){
$(this).next('span').toggle();
});