CODEWITHSUNDEEP
javascriptjquery
Federico
Federico

Reputation: 1422

Change name onclick

I have this javascript that shows and hides a class

$(document.body).ready(function(){
var hidden=$('.hidden');
$('#slid').click(function(){
    if(hidden.hasClass('visible')){
       hidden.removeClass('visible');
    }
    else{
       hidden.addClass('visible');
    }
    });
});

All I want is that the INFO name, once clicked, it changes its name in CLOSE.

https://jsfiddle.net/q6oe2c80/

Upvotes: 1

Views: 93

Answers (3)

tomiy
tomiy

Reputation: 156

Just edit the html inside #slid https://jsfiddle.net/d2mbzLqw/

$(document.body).ready(function(){
var hidden=$('.hidden');
$('#slid').click(function(){
    if(hidden.hasClass('visible')){
        hidden.removeClass('visible');
        $(this).html("INFO");
    }
    else{
        hidden.addClass('visible');
        $(this).html("CLOSE");
    }
});});

Upvotes: 0

Sam Teng Wong
Sam Teng Wong

Reputation: 2439

this is based on your fiddle.

https://jsfiddle.net/q6oe2c80/7/

 $(document.body).ready(function(){
 var hidden=$('.hidden');
 $('#slid').click(function(){
    if(hidden.hasClass('visible')){
       hidden.removeClass('visible');
       $(this).html("INFO");
     }
    else
    {
       hidden.addClass('visible');
       $(this).html("Close");
    }
 });});

Upvotes: 0

Rajaprabhu Aravindasamy
Rajaprabhu Aravindasamy

Reputation: 67207

Try to use .text() along with simple ternary operator to achieve what you want,

$(document.body).ready(function() {
  var hidden = $('.hidden');
  $('#slid').click(function() {
    hidden.toggleClass("visible");
    $(this).text(hidden.hasClass("visible") ? "CLOSE" : "INFO")
  });
});

DEMO

Upvotes: 2

Related Questions