CODEWITHSUNDEEP
javascriptjqueryhtml
Adrian
Adrian

Reputation: 2291

Show a div on click and hide the other div and oposite

I am trying to: When I click a button to have a div1 show and the div2 hide, and when I click it again to do the opposite, div 2 hide and div1 show. I managed to achieve only the first part.

Jquery:

<script type="text/javascript">
  $(document).ready(function() {
    $("#insert").on('click', function() {
      $(".subtable").hide();
      $(".insert-field").show();
    });
  });
</script>

HTML

<input type="button" name="insert" id="insert" value="Insert Subscriber(s)">
    <table class="subtable">...</table>
    <div class="insert-field">...</div>

What am I missing?

Upvotes: 0

Views: 170

Answers (4)

Maneesh Singh
Maneesh Singh

Reputation: 575

$(document).ready(function(){
  var flag = true;
  $("#button").on('click',function(){
      if(flag == true){
        $("#div1").show();
        $("#div2").hide();
        flag =false;
       }else{
          $("#div1").hide();
          $("#div2").show();
          flag =true;
         }
   });

Upvotes: 0

Scott Saunders
Scott Saunders

Reputation: 30394

You can use toggle() to change the display of an element. If it is hidden it will be shown. And if shown, will be hidden. That's the easiest way to just flip things back and forth.

The other way would be to either check whether the element is hidden, or keep track of the state in a separate variable to which you can refer to know whether to hide or show.

Upvotes: 1

Kevin M.
Kevin M.

Reputation: 25

Use jQuery.toggle(). Depending on your implementation, you can set the argument of .toggle() as true or false, based on the .visible property of another element.

Upvotes: 1

Harry
Harry

Reputation: 3195

$("button").click(function(){
   $("p").toggle();
});

Here is a quick tutorial to help you.

W3SCHOOLS

Upvotes: 1

Related Questions