add and remove class on same button or element

Question

I'm looking for a way to add and remove class on the same button. So far this is my work in progress. The concept is when I click on the menu button it shows the menu. When I tap on the menu button again. The menu hides

$(document).ready(function(){
    $('button.toggle-portfolio').on('click', function(e){
      $('.portfolio-contact-form-wrap').addClass('show');
    });
});

$('button.toggle-portfolio').on('click', function(e){ $(this).toggleClass('show'); }); try this on same button? — guradio
– guradio, Commented Feb 4, 2016 at 10:26
It is really unclear what you are asking... At least, provide relevant HTML markup and better describe expected behaviour — A. Wolff
– A. Wolff, Commented Feb 4, 2016 at 10:37

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

2

To achieve this you can use .toggleClass() like so:

$(document).ready(function(){
    $('button.toggle-portfolio').on('click', function(e){
      $('.portfolio-contact-form-wrap').toggleClass('show');
    });
});

JsFiddle example

toggleClass

Add or remove one or more classes from each element in the set of matched elements, depending on either the class's presence or the value of the state argument.

This method takes one or more class names as its parameter. In the first version, if an element in the matched set of elements already has the class, then it is removed; if an element does not have the class, then it is added.

For more information about this function check here Hope this helps!

edited Jun 20, 2020 at 9:12

CommunityBot

11 silver badge

answered Feb 4, 2016 at 10:29

Mike Donkers

3,6992 gold badges23 silver badges35 bronze badges

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

Comments

maiko · Accepted Answer · 2016-02-04 10:27:57Z

1

You should use $(this) and toggleClass

$(document).ready(function(){
    $('button.toggle-portfolio').on('click', function(e){
      $(this).toggleClass('show');
    });
});

which will add the class back to the specific element that was clicked.

http://api.jquery.com/toggleclass/

http://www.learningjquery.com/2007/08/what-is-this

answered Feb 4, 2016 at 10:27

maiko

4051 gold badge4 silver badges15 bronze badges

Comments

Sumanta736 · Accepted Answer · 2016-02-04 10:28:56Z

1

Try this:

$(document).ready(function(){
  $('button.toggle-portfolio').on('click', function(e){
     $('.portfolio-contact-form-wrap').toggleClass('show');
  });
});

answered Feb 4, 2016 at 10:28

Sumanta736

6953 silver badges10 bronze badges

Comments

guradio · Accepted Answer · 2016-02-04 10:37:14Z

1

DEMO

$('.toggle-portfolio').on('click', function(e) {
  $('.portfolio-contact-form-wrap').toggleClass('show');
});

Try this way

edited Feb 4, 2016 at 10:37

answered Feb 4, 2016 at 10:29

guradio

15.6k4 gold badges39 silver badges65 bronze badges

2 Comments

A. Wolff Over a year ago

OP doesn't want to toggle class on clicked element :) EDIT: oops looks like quite confusing sentence indeed: I'm looking for a way to add and remove class on the same button and regarding OP's posted code

guradio Over a year ago

@A.Wolff Actually I wanted to clarify it but he didnt respond so i assumed that the clicked button but then i changed my answer hoping this is what OP wants

Jai · Accepted Answer · 2016-02-04 10:36:08Z

0

You can use .add() method with .toggleClass():

$(document).ready(function() {
  $('button.toggle-portfolio').on('click', function(e) {
    $('.portfolio-contact-form-wrap').add(this).toggleClass('show');
  });
});

.portfolio-contact-form-wrap {
  color:blue;
}
.show {
  color: red;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button class="toggle-portfolio">Button</button>
<div class="portfolio-contact-form-wrap">
  <h1>contact form</h1>
</div>

answered Feb 4, 2016 at 10:36

Jai

74.8k12 gold badges77 silver badges104 bronze badges

Comments

Nuwan Chinthana · Accepted Answer · 2016-02-04 10:36:56Z

0

Use toggleClass('show') It will add the class on one click and remove the class on the second click.

answered Feb 4, 2016 at 10:36

Nuwan Chinthana

1359 bronze badges

Comments

Jobelle · Accepted Answer · 2016-02-04 11:00:11Z

0

<script>
    $(document).ready(function () {
        $('button.toggle-portfolio').on('click', function (e) {
            $('.portfolio-contact-form-wrap').toggleClass('show');
        });
    });
</script>

answered Feb 4, 2016 at 11:00

Jobelle

2,8441 gold badge17 silver badges27 bronze badges

1 Comment

guradio Over a year ago

for the nth time :)

Collectives™ on Stack Overflow

add and remove class on same button or element

7 Answers 7

Comments

Comments

Comments

2 Comments

Comments

Comments

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

7 Answers 7

Comments

Comments

Comments

2 Comments

Comments

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related