CODEWITHSUNDEEP
javascriptjquery
jobel
jobel

Reputation: 3

Hide and Show button after click using jquery

Hi to all my co developer,

I Have a bug using this function.

function clickHandler() {
      $('#show').toggle('fast');
      $('#hide').toggle('fast');
  }

$(document).ready(function(){
       $('#show').hide();
        $('#hide').on('click', clickHandler);
});
   <li id="hide" ><a  href="switch_lang.php?lang=2">Arabic </a></li>
                              
   <li id="show" style="display:none;"><a href="switch_lang.php?lang=1">English  </a></li>

Problem: When I click the Arabic button did not hide or toggle to English button.

Thank you in advance.

Upvotes: 0

Views: 937

Answers (3)

Asifuzzaman
Asifuzzaman

Reputation: 1783

use the below code

  function clickHandler() {
  $('#show').toggle('fast');
  $('#hide').toggle('fast');     
   }
   $(document).ready(function(){
   $('#show').hide();
   $('#hide').on('click', clickHandler);
   $('#show').on('click', clickHandler);

    });

link toggle fiddle

Upvotes: 0

Milan Chheda
Milan Chheda

Reputation: 8249

Below is the code: 

function clickHandler() {
      $('#show').toggle('fast');
      $('#hide').toggle('fast');
      return false;
  }

$(document).ready(function(){
       $('#show').hide();
        $('#hide, #show').on('click', clickHandler);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<li id="hide" ><a  href="switch_lang.php?lang=2">Arabic </a></li>
                              
   <li id="show" style="display:none;"><a href="switch_lang.php?lang=1">English  </a></li>

return false; was missing.

Upvotes: 0

4b0
4b0

Reputation: 22323

Running code with toggle.

function clickHandler() {
  $('#show').toggle('fast');
  $('#hide').toggle('fast');
}
$(document).ready(function() {
  $('#show').hide();
  $('#hide,#show').on('click', clickHandler);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<li id="hide"><a href="#">Arabic </a></li> // chage href to your real page

<li id="show" style="display:none;"><a href="#">English  </a></li>

Upvotes: 1

Related Questions