How to make a simple toggle button work using jQuery

Question

I am trying to build a simple toggle button to change the classes on an element and its text of the containing 'p' element.

On the first click it works just fine, but then it doesn't toggle back.

What do I miss here?

$('.disclaimer').click(function() {
    if ($('#disclaimerText').text = "Disclaimer Declined") {
        $('.disclaimer').addClass("disclaimerAccepted");
        $('#disclaimerText').text("Disclaimer Accepted")
    } else {
        $('.disclaimer').removeClass("disclaimerAccepted");
        $('#disclaimerText').text("Disclaimer Declined")
    }
});

.disclaimer {
    font-family: 'Varela Round', sans-serif;
    font-weight: bold;
    font-size: 0.7vw;
    width: 15%;
    height: 50px;
    border-radius: 20px;
    background-color: #f96c8a;
    color: #545d7b;
}

.disclaimerAccepted {
    font-family: 'Varela Round', sans-serif;
    font-weight: bold;
    font-size: 0.7vw;
    width: 15%;
    height: 50px;
    border-radius: 20px;
    background-color: #30e83a;
    color: #545d7b;
}

#disclaimerText {
    display: block;
    margin: auto;
    font-size: 2vw;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="disclaimer">
    <p id="disclaimerText">Disclaimer Declined</p>
</div>

Mamun · Accepted Answer · 2020-04-25 09:43:51Z

2

You can use jQuery's .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.

Please Note: text is a jQuery method, to get the text you have to use .text() and also instead of assignment operator (=), you have to use comparison operator (== or ===) to compare the text:

$('.disclaimer').click(function() {
  $('.disclaimer').toggleClass("disclaimerAccepted");
  if ($('#disclaimerText').text() == "Disclaimer Declined") {        
    $('#disclaimerText').text("Disclaimer Accepted")
  } else {
    $('#disclaimerText').text("Disclaimer Declined")
  }
});

.disclaimer {
    font-family: 'Varela Round', sans-serif;
    font-weight: bold;
    font-size: 0.7vw;
    width: 15%;
    height: 50px;
    border-radius: 20px;
    background-color: #f96c8a;
    color: #545d7b;
}

.disclaimerAccepted {
    font-family: 'Varela Round', sans-serif;
    font-weight: bold;
    font-size: 0.7vw;
    width: 15%;
    height: 50px;
    border-radius: 20px;
    background-color: #30e83a;
    color: #545d7b;
}

#disclaimerText {
    display: block;
    margin: auto;
    font-size: 2vw;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="disclaimer">
  <p id="disclaimerText">Disclaimer Declined</p>
</div>

edited Apr 25, 2020 at 9:43

answered Apr 25, 2020 at 9:29

Mamun

69k9 gold badges51 silver badges62 bronze badges

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

2 Comments

JSRB Over a year ago

And how to additionally change the text on toggle/click? Thanks

JSRB Over a year ago

Sorry, I mean I want the text to change to "Disclaimer Accepted" or "Disclaimer Declined" depending on the toggle status (so changing text back and forth on each click of the div)

Hien Nguyen · Accepted Answer · 2020-04-25 10:10:04Z

You wrong at text() instead of text, and missing == instead of = is assign operator

Change from

if ($('#disclaimerText').text = "Disclaimer Declined") {

to

 if ($('#disclaimerText').text() == "Disclaimer Declined") {

$('.disclaimer').click(function() {
    if ($('#disclaimerText').text() == "Disclaimer Declined") {
    
        $('.disclaimer').addClass("disclaimerAccepted");
        $('#disclaimerText').text("Disclaimer Accepted")
    } 
    else {
       
        $('.disclaimer').removeClass("disclaimerAccepted");
        $('#disclaimerText').text("Disclaimer Declined")
    }
});

.disclaimer {
    font-family: 'Varela Round', sans-serif;
    font-weight: bold;
    font-size: 0.7vw;
    width: 15%;
    height: 50px;
    border-radius: 20px;
    background-color: #f96c8a;
    color: #545d7b;
}

.disclaimerAccepted {
    font-family: 'Varela Round', sans-serif;
    font-weight: bold;
    font-size: 0.7vw;
    width: 15%;
    height: 50px;
    border-radius: 20px;
    background-color: #30e83a;
    color: #545d7b;
}

#disclaimerText {
    display: block;
    margin: auto;
    font-size: 2vw;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="disclaimer">
    <p id="disclaimerText">Disclaimer Declined</p>
</div>

Collectives™ on Stack Overflow

How to make a simple toggle button work using jQuery

2 Answers 2

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related