CODEWITHSUNDEEP
jquerycss
Claudio
Claudio

Reputation: 904

jQuery - Change CSS3 button text?

I made a CSS3 button, which doesn't use the 'value' property, but just text.

http://jsfiddle.net/vVsAn/1789/

It's a bit of a problem as I have a script, that changes the value from 'Hide' to 'Show'.

But changing the value here doesn't help too much.

jQuery:

jQuery(document).ready(function(){
        jQuery('#hideshow').on('click', function(event) {        
             jQuery('#lang').toggle('show');
            debugger
            if($('#hideshow').val()=="Hide")
                $('#hideshow').val("Show")
                else
                $('#hideshow').val("Hide")    
        });
    });

Upvotes: 0

Views: 70

Answers (5)

laruiss
laruiss

Reputation: 3816

As everybody said, .text() will be the right choice, but I just allowed myself to do some optimization ;-)

jQuery(document).ready(function($){ //  if you use .ready() function, you should go ahead and use the $ alias
    var $button = $('#hideshow'), // try to store th jquery objects if you use them more than once
        textWhen = {"hidden": "Show", "visible": "Hide"}; // Store the text will be easier to maintain
    $button.on('click', function(event) {        
        $('#lang').toggle('show');
        if($button.text()==textWhen.hidden)
            $button.text(textWhen.visible)
        else
            $button.text(textWhen.hidden)
    });
});

http://jsfiddle.net/vVsAn/1801/

Bye

Upvotes: 0

yoyo
yoyo

Reputation: 722

 try this one:
 $(document).ready(function(){
            $('#hideshow').on('click', function(event) {        
                 $('#lang').toggle('show');
                 if($('#hideshow').attr("value")=="Hide"){
                    $('#hideshow').attr("value","Show");
                 }else{
                    $('#hideshow').attr("value","Hide");
                 }  
            });
        });

Upvotes: 0

myTerminal
myTerminal

Reputation: 1646

Try the jquery '.text()' property. Here is the updated code: http://jsfiddle.net/myTerminal/vVsAn/1794/

if($('#hideshow').text()=="Hide")
  $('#hideshow').text("Show");
else
   $('#hideshow').text("Hide");

Upvotes: 0

kmas
kmas

Reputation: 6439

You have to use text function.

jQuery(document).ready(function(){
        jQuery('#hideshow').on('click', function(event) {        
             jQuery('#lang').toggle('show');
            debugger
            if($('#hideshow').text()=="Hide")
                $('#hideshow').text("Show")
                else
                $('#hideshow').text("Hide")    
        });
    });

Here is a jsFiddle.

Upvotes: 2

Nitin Varpe
Nitin Varpe

Reputation: 10694

Use .text

if($('#hideshow').text()=="Hide")
                    $('#hideshow').text("Show")
                    else
                    $('#hideshow').text("Hide")

http://jsfiddle.net/vVsAn/1789/

Upvotes: 1

Related Questions