CODEWITHSUNDEEP
javascriptjquerycss
stephjhonny
stephjhonny

Reputation: 225

Toggle input visibility on click

I have two buttons and two input fields, the input fields are hidden what i want to do is to toggle the display property on click but it only works once, and i have a close button next to each input this close button should remove each input on click, here is my code:

$(function() {
       $('.btn1').click(function() {
         $('.input1').css('display','block');
       });
   });

   $(function() {
          $('.btn2').click(function() {
            $('.input2').css('display','block');
          });
      });
      
   $(".closebutton").click(function () {
             $("input").remove('.removediv');
           });      
.input1, .input2{
display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button type="button" class="btn btn-default btn1">Button1</button>
<button type="button" class="btn btn-default close">Close button</button>
<input type="text" class="form-control input1 removediv">Input 1
<br>
<button type="button" class="btn btn-default btn2">Button2</button> 
<button type="button" class="btn btn-default close">Close button</button>
<input type="text" class="form-control input2 removediv">Input 2

Upvotes: 0

Views: 2607

Answers (5)

prasanth
prasanth

Reputation: 22490

Try this method's

  1. Change the toggle() instead of css('display') property
  2. .closebutton is wrong selector try .close and hide the next() input, not all $('input') .use hide() instead of remove() 

$(function() {
  $('.btn1').click(function() {
    $('.input1').toggle()
  });
});

$(function() {
  $('.btn2').click(function() {
    $('.input2').toggle()
  });
});

$(".close").click(function() {
  $(this).next("input").hide();
});
.input1,
.input2 {
  display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button type="button" class="btn btn-default btn1">Button1</button>
<button type="button" class="btn btn-default close">Close button</button>
<input type="text" class="form-control input1 removediv">Input 1
<br>
<button type="button" class="btn btn-default btn2">Button2</button>
<button type="button" class="btn btn-default close">Close button</button>
<input type="text" class="form-control input2 removediv">Input 2

Upvotes: 1

Sagar Roy
Sagar Roy

Reputation: 443

$(function() {
       $('.btn1').click(function() {
         $('.input1').toggle();
      
       });
   });

   $(function() {
          $('.btn2').click(function() {
            $('.input2').toggle();
          });
      });
.input1, .input2{
display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button type="button" class="btn btn-default btn1">Button1</button>
<input type="text" class="form-control input1">Input 1
<br>
<button type="button" class="btn btn-default btn2">Button2</button> 
<input type="text" class="form-control input2">Input 2

Upvotes: 0

Jatin patil
Jatin patil

Reputation: 4288

$(function() {
       $('.btn1').click(function() {
         $('.input1').toggle();
       });
   });

   $(function() {
          $('.btn2').click(function() {
            $('.input2').toggle();
          });
      });
.input1, .input2{
display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button type="button" class="btn btn-default btn1">Button1</button>
<input type="text" class="form-control input1">Input 1
<br>
<button type="button" class="btn btn-default btn2">Button2</button> 
<input type="text" class="form-control input2">Input 2

Upvotes: 0

Daniel Taub
Daniel Taub

Reputation: 5369

Just use Jquery toggle option : 

$(function() {
  $('.btn1').click(function() {
    $('.input1').toggle();
  });
});

$(function() {
  $('.btn2').click(function() {
    $('.input2').toggle();
  });
});

Upvotes: 0

j08691
j08691

Reputation: 207901

If you want to toggle between visible and hidden use .toggle(), otherwise all you do on click is show the inputs

$(function() {
  $('.btn1, .btn2').click(function() {
    $(this).next().toggle();
  });
});
.input1,
.input2 {
  display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button type="button" class="btn btn-default btn1">Button1</button>
<input type="text" class="form-control input1">Input 1
<br>
<button type="button" class="btn btn-default btn2">Button2</button>
<input type="text" class="form-control input2">Input 2

I also reduced your code a bit.

Upvotes: 0

Related Questions