Jquery toggle

[pdxSherpa]

have three posts on a page.

each have a a bioHeader & a bio section.

I am trying to figure out how on click only one of the bio per post is toggled off/on

<script>
	$( ".bioHeader" ).click(function() {
	  $( ".bio" ).toggle();
	});


</script>

That code is doing it for all of them. Looking into a this
But not sure.
Could i please get some advice on this one?
thx

[Pepster]

@pdxSherpa

$( “.bioHeader” ).click(function() {
$( “.bio” ).toggle();
});

I like slideToggle() a little bit better:jQuery Toggle

[pdxSherpa]

first I wanted it to work, then refine it. So this worked.

$( ".bioHeader" ).click(function() {
  $(this).next('.bio').toggle();

});
$('.bio').on('click', function (event) {
    event.stopPropagation();
});

[PaulOB]

@pdxSherpa

$(‘.bio’).on(‘click’, function (event) {
event.stopPropagation();
})

Why do you need that extra js?

It seems that .bio is not inside bioHeader so shouldn’t be an issue?

It is generally best to avoid using stopPropagation as it may cause other issues further down the line.

[pdxSherpa]

am open to suggestions.
This is wp. so there are several posts all w/the same classes.
thx
D

[PaulOB]

That doesn’t seem to answer my question

The first part of the code should be doing what you want assuming that the header is the trigger for the open and close. The .bio element would seem to have no part to play in this process hence my question?

[pdxSherpa]

ok see what you mean.
yep. works.
Thx.