June 14, 2014

How to make button disappear onclick and show another button on hide of the active button?

How to make button disappear onclick and show another button on hide of the active button

When we click on a button the text changes. This i used in a web design to show the phone number of the person onclick.

HTML

<button id="show-button">Show button</button>
<button id="hide-button">Hide button</button>

CSS

#show-button { cursor: pointer; }
#hide-button { cursor: pointer; display: none; }

/*Some stylings to the buttons*/
#show-button, #hide-button  { color: #fff; border-radius: 5px; padding: 10px 50px; }
#show-button { background: #0703af; }
#hide-button { background: #af2303; }

jQuery

$(document).ready(function() {
  $("#show-button").click(function () {
   $("#hide-button").show()
   $("#show-button").hide()
  });
  $("#hide-button").click(function () {
   $("#show-button").show()
   $("#hide-button").hide()
  });
 });
Demo

No comments:

Post a Comment

Popular Posts

Views