.toggle() function

Question

I want to apply the toggle function to the two buttons separately. However, when I use the code below, it toggles both content under each button. How can I separate them so that when I click the first button only the content under it will be toggled?

<!DOCTYPE html>
<html>
<head>
  <script src="http://code.jquery.com/jquery-latest.js"></script>
</head>
<body>
  <button>Toggle</button>
<p>Hello</p>
<p style="display: none">Good Bye</p>

<button>Toggle</button>
<p>Hello</p>
<p style="display: none">Good Bye</p>

<script>
$("button").click(function () {
$("p").toggle();
});
</script>

</body>
</html>

Community · Accepted Answer · 2020-06-20 09:12:55Z

2

Simple: use nextUntil().
Will select all the next elements until matched element reached (in your case the next button):

jsFiddle demo

$("button").click(function () {
     $(this).nextUntil('button').toggle();
});

edited Jun 20, 2020 at 9:12

CommunityBot

11 silver badge

answered Jul 16, 2012 at 16:11

Roko C. Buljan

209k41 gold badges335 silver badges346 bronze badges

Sign up to request clarification or add additional context in comments.

7 Comments

wcdomy Over a year ago

Awesome! Works! What is the .nextUntil thing?

Roko C. Buljan Over a year ago

@wcdomy as I said, it will collect all the elements he founds (in our case the <p> elements) until selector reached ('button'). api.jquery.com/nextuntil but not including the selector we mention (the next <button>), ideal to use in your case!

wcdomy Over a year ago

If I want to change the text for the button once it's clicked. For example, from "Edit" to "Save". How can I do that? @Roko C. Buljan

Roko C. Buljan Over a year ago

Sure you can: jsbin.com/eroyas/3/edit Please, take in consideration to accept an answer! meta.stackexchange.com/questions/5234/…

Roko C. Buljan Over a year ago

@wcdomy You can also use ternary operators to check / change text: jsbin.com/eroyas/4/edit

|

Chandu · Accepted Answer · 2012-07-16 16:01:10Z

1

Try this:

$("button").click(function () {
  $(this).nextAll("p:lt(2)").toggle();
});

http://jsbin.com/orujav

answered Jul 16, 2012 at 16:01

Chandu

83.2k19 gold badges137 silver badges136 bronze badges

1 Comment

wcdomy Over a year ago

If I want to change the text for the button once it's clicked. For example, from "Edit" to "Save". How can I do that?

j08691 · Accepted Answer · 2012-07-16 16:08:42Z

0

Why have two paragraph tags for this? Make your HTML:

<button>Toggle</button>
<p>Hello</p>

<button>Toggle</button>
<p>Hello</p>

and your jQuery:

$("button").click(function () {
    $(this).next('p').html( ($(this).next('p').html()=='Hello')?'Good Bye':'Hello');
});

jsFiddle example

answered Jul 16, 2012 at 16:08

j08691

208k33 gold badges269 silver badges281 bronze badges

Collectives™ on Stack Overflow

.toggle() function

3 Answers 3

jsFiddle demo

7 Comments

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

7 Comments

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related