Multiple toggle buttons, 1 jQuery code

Question

Multiple toggle buttons, 1 jQuery code

1.1k views Asked by New Life At 26 October 2024 at 19:58

Trying to work out if it's possible to have multiple toggle buttons on my page while not having to repeat jQuery .toggleClass code for each button (with different id's)? Maybe use 'this' or some other method?

$(document).ready(function(){
    $("button").click(function(){
        $("p").toggle('fast');
    });
});

<!DOCTYPE html>
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>

</head>
<body>

<button>Toggle</button>

<p>This is a paragraph with little content.</p>
<p>This is another small paragraph.</p>
  
<button>Toggle</button>

<p>This is a paragraph with little content.</p>
<p>This is another small paragraph.</p>

</body>
</html>

Thanks in advance!

Original Q&A

There are 3 answers

**Mohamed-Yousef** · Answer 1 · 2015-06-05 01:24:32

to toggle the next p you need to use .next()

$(document).ready(function(){
    $("button").click(function(){
        $(this).next('p').fadeToggle('fast');
    });
});

to toggle the next p and next next p you need to use .next()

$(document).ready(function(){
        $("button").click(function(){
            $(this).next('p').fadeToggle('fast');
            $(this).next().next().fadeToggle('fast');
        });
    });

you can select your button ids like

 $("#button1, #button2").click();

I don't prefer your html structure .. if you can put each button and its P in one div it will be better to handle

**Lee Li** · Answer 2 · 2015-06-05 01:26:55

Lee Li On 05 June 2015 at 01:26

You can use event delegation.

For example, if you bind click event to buttons. I think you can use id or data attribute to differentiate which button is triggered. Then you can move forward.

**pavankumar kavvuri** · Answer 3 · 2017-12-24 16:48:45

$(function() { $('#toggle-event1,#toggle-event2,#toggle-event3,#toggle-event4,#toggle-event5').change(function() { let state1 = $(this).prop('checked'); //alert( "First handler for .toggle() called." );

                  alert(this.id);})

TechQA.

Multiple toggle buttons, 1 jQuery code

There are 3 answers

Related Questions in JAVASCRIPT

Related Questions in JQUERY

Related Questions in TOGGLE

Related Questions in THIS

Popular Questions

Popular Tags

Trending Questions