Switch to different button on click

Question

I want code to switch the buttons. If I pressed button1 first time, it must show button2 and vice versa.

<input type="submit" value="asc" name="button1" id="but1">

<input type="submit" value="desc" name="button2" id="but3">

Answer 1

Not sure what you're trying to achieve, but you can use:

$('input[type="submit"]').click(function() {
    $(this).hide().siblings('input[type="submit"]').show();   
});

Fiddle Demo

Answer 2

You can try the code below:

$('input[type="submit"]').click(function(){
   var valueOfButton = $(this).val();
   if(valueOfButton == 'asc')
     {
         $('input[value="asc"]').show();
       $('input[value="desc"]').hide();
     }
     else
    {  
         $('input[value="desc"]').show();
         $('input[value="asc"]').hide();
    }
});

Answer 3

Try using the following functions:

• $(element)click(callback) will handle the click of the element
• $(element).show() will show the element
• $(element).hide() will hide the element

so a semple code is:

//first hidden the second button
$('#but3').css('display','none')

// handle click of first button
$('#but1').click(function(){
    $(this).hide()
    $('#but3').show()
});

// handle click of second button
$('#but3').click(function(){
    $(this).hide()
    $('#but1').show()
});

Here is an example: http://jsfiddle.net/L7zux/1/

Answer 4

One solution without the need for JQuery would be this one:

<input type="button" value="asc" name="button1" id="but1" onClick="document.getElementById('but3').style.display='';this.style.display='none';">

<input type="button" value="desc" name="button2" id="but3" style="display:none;" onClick="document.getElementById('but1').style.display='';this.style.display='none';">

You can also do it this way if you want to use the visibility:

<input type="button" value="asc" name="button1" id="but1" onClick="document.getElementById('but3').style.visibility='visible';this.style.visibility='hidden';">

<input type="button" value="desc" name="button2" id="but3" style="visibility:hidden;" onClick="document.getElementById('but1').style.visibility='visible';this.style.visibility='hidden';">

Using visibility preserves the buttons position. I changed the type from submit to button just out of demonstration reasons.

You can look at both JSFIDDLE demos of these solutions here and here .

Answer 5

document.getElementById('but1').addEventListener('click', function() {
    document.getElementById('but1').style.visibility = 'hidden';
    document.getElementById('but3').style.visibility = 'visible'; }, false);

document.getElementById('but3').addEventListener('click', function() {
    document.getElementById('but3').style.visibility = 'hidden';
    document.getElementById('but1').style.visibility = 'visible'; }, false);

If you want to hide button and its placeholder completely, use style.display = 'none' and style.display = 'block' . If you put both buttons in div container with default static positioning, then both buttons will appear at the same position in container.

Answer 6

Simply Use .toggle() in jQuery

$('input[type="submit"]').click(function() {
   $('input[type="submit"]').toggle();
});

Fiddle

Answer 7

I'm betting your .toggle-radio-switch elements are siblings. Remove .parent() from your code. It isn't needed since .radio-switch-slider is contained directly in .toggle-radio-switch

$(this).find('.radio-switch-slider')

Answer 8

By default when page will load put following code so that your second button will be hide.

$(document).ready(function(e){ $('#but3').hide(); });

After that Put code that were

$('input[type="submit"]').click(function() { $(this).hide().siblings('input[type="submit"]').show();
});