How can i change the button text and class like toggle

Question

How can i change the button text and class like toggle, default it is blue and text show onlick it should change to hide with white button background.

<button class="btn exam-int-btn">Show</button>

jsFiddle here

On click what should happen? Not Getting exactly what do u want? — Bharath Kumar, Sep 08 '17 at 05:20
sorry for poor explanation, you can see in jsfiddle it is enroll onclick it has to change to enrolled and with background some color .@BharathKumar Thank you — harry, Sep 08 '17 at 05:22
I've tried this thing it does seem to work as i wanted.. $(".exam-int-btn").click(function() { if($(this).hasClass("name")) { $(this).text('Enroll'); } else { $(this).text('Enrolled'); } $(this).toggleClass("name"); }); — harry, Sep 08 '17 at 05:23
@harry check this fiddle for the answer, I edited your fiddle https://jsfiddle.net/nop97njv/ good luck! — Taufik Nur Rahmanda, Sep 08 '17 at 05:36
@harry you're welcome! please mark/approve my answer below if my fiddle edit is correct — Taufik Nur Rahmanda, Sep 08 '17 at 05:37

Taufik Nur Rahmanda · Accepted Answer · 2017-09-08T05:34:42.133

1

Use <span>

<button class="btn exam-int-btn">
<span>Show</span>
<span style="display:none">Hide</span>
</button>

CSS:

.white {background-color:#fff !important;color:#000}

jQuery:

$(document).ready(function() {
    $('button').on('click',function() {
        $(this).toggleClass('white').find('span').toggle();
    });
});

fiddle: https://jsfiddle.net/nop97njv/

edited Sep 08 '17 at 05:34

answered Sep 08 '17 at 05:27

Taufik Nur Rahmanda

1,862
2
20
36

Maulik · Answer 2 · 2017-09-08T05:52:59.390

Do you want something like this below Example ???

$('button').on('click',function(){
  $(this).toggleClass("show hide");
})

.exam-int-btn {
   width: 100px;
    line-height: 2.5em;
    justify-content: center;
    padding: 0;
    font-weight: 400;
    color: #ffffff;
    background-color: #2196F3;
    text-align: center;
    border-radius: 4px;
    box-shadow: 5px 5px 15px 0 rgba(46,61,73,.15);
    transition: all .3s ease;
    border: 1px solid transparent;
    cursor: pointer;
}
.show{
   background-color: #2196F3;
}
.hide{
   background-color: white;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button class="btn exam-int-btn">Enroll</button>

Yogesh · Answer 3 · 2017-09-08T05:29:47.767

0

Check below fiddle

Are you looking for this?

http://jsfiddle.net/yogesh078/Bnuy7/2174/

    var onClick = function() {
    var btn= document.getElementById('btnEnroll');
    var className = btn.getAttribute("class");
  if(className=="exam-int-btn") {
    btn.className = "white";
  }
  else{
    btn.className = "exam-int-btn";
  }

};

$('#btnEnroll').click(onClick);

edited Sep 08 '17 at 05:29

answered Sep 08 '17 at 05:24

Yogesh

655
5
13

thanks for your effort, but toggle is not working @yogesh – harry Sep 08 '17 at 05:25

score 0 · Answer 4 · edited Sep 10 '17 at 17:29

0

Button

<button class="show">Show</button>

Javascript / jQuery

 `$( ".show" ).click(function() {
     $( this ).removeClass( "show" ).addClass("hide");
     $(this).html('Hide');
  });

  $( ".hide" ).click(function() {
      $( this ).removeClass( "hide" ).addClass("show");
      $(this).html('Show');
  });`

CSS - Do Your CSS Lines

edited Sep 10 '17 at 17:29

marc_s

732,580
175
1,330
1,459

answered Sep 08 '17 at 05:28

Janen R

729
10
21

score 0 · Answer 5 · answered Sep 08 '17 at 05:30

$('button').on('click',function(){
    if(!$(this).hasClass('red')){
       $(this).addClass('red').text('Enrolled');
    }else{
       $(this).removeClass('red').text('Enroll');
    }
 
})

.exam-int-btn {
   width: 100px;
    line-height: 2.5em;
    justify-content: center;
    padding: 0;
    font-weight: 400;
    color: #ffffff;
    background-color: #2196F3;
    text-align: center;
    border-radius: 4px;
    box-shadow: 5px 5px 15px 0 rgba(46,61,73,.15);
    transition: all .3s ease;
    border: 1px solid transparent;
    cursor: pointer;
}
.exam-int-btn.red{
    background-color: red;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button class="btn exam-int-btn">Enroll</button>

score 0 · Answer 6 · answered Sep 08 '17 at 05:30

You can do like this using jQuery:

$('#my-btn').click(function(){
  //change text
  $(this).text('changed text here');
   
  //change text & background color
  $(this).css({
      'color' : '#000',
      'background-color' : '#fff'
  });
})

.exam-int-btn {
   width: 100px;
    line-height: 2.5em;
    justify-content: center;
    padding: 0;
    font-weight: 400;
    color: #ffffff;
    background-color: #2196F3;
    text-align: center;
    border-radius: 4px;
    box-shadow: 5px 5px 15px 0 rgba(46,61,73,.15);
    transition: all .3s ease;
    border: 1px solid transparent;
    cursor: pointer;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button id="my-btn" class="btn exam-int-btn">Enroll</button>

score 0 · Answer 7 · answered Sep 08 '17 at 05:34

Hope this will helps

$('button').on('click',function(){
 
   $(this).text($(this).text() == "Enroll" ? "Enrolled": "Enroll");
  $(this).toggleClass('btn-toggle')
})

.exam-int-btn {
   width: 100px;
    line-height: 2.5em;
    justify-content: center;
    padding: 0;
    font-weight: 400;
    color: #ffffff;
    background-color: #2196F3;
    text-align: center;
    border-radius: 4px;
    box-shadow: 5px 5px 15px 0 rgba(46,61,73,.15);
    transition: all .3s ease;
    border: 1px solid transparent;
    cursor: pointer;
}

.btn-toggle{
background-color:white;
color:#2196F3;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button class="btn exam-int-btn">Enroll</button>

If it is helpful.Try to accept my answer. It helps fr me. – Bharath Kumar Sep 08 '17 at 05:51 — Bharath Kumar, Sep 08 '17 at 05:51

score 0 · Answer 8 · answered Sep 08 '17 at 05:42

Very easy, this is my solution:

    var flag = false; //default text show, background-color: blue
    $("button").click(function(e){
       e.preventDefault();
      if(flag==true){
        flag=false;
      <!-- change text, background-color -->
        $(this).text("Show");
     $(this).css("background-color","blue");
      }else{
    
     flag=true;
        $(this).text("Hide");
     $(this).css("background-color","white");
    }
    })

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button style="background-color:blue">Show</button>

How can i change the button text and class like toggle

8 Answers8