How to hide a div when checkbox is selected - JQuery

Question

I have this structure and I want to hide the div class "categorydesc" when I check something from the checklist... How can I do that?

<ul id="ul_layered_id_feature_10" class="col-lg-12">
<li id="layered_id_feature_10" class="checkbox" >
<input class="checkbox" name="layered_id_feature_10" id="layered_id_feature_10" type="checkbox">
<label for="layered_id_feature_10">test</label>
</li>
<li id="layered_id_feature_9" class="checkbox" >
<input class="checkbox" name="layered_id_feature_9" id="layered_id_feature_9" type="checkbox">
<label for="layered_id_feature_9">test</label>
</li>
</ul>

<div class="categorydesc">
<p>test</p>
</div>

there are probably hundreds of questions and answers around this sort of thing on SO; do some research first please before you post a question — The Bearded Llama
– The Bearded Llama, Commented May 9, 2017 at 9:11

Mihai Alexandru-Ionut · Accepted Answer · 2017-05-09 09:15:48Z

1

You can do this more simply, using toggle method.

$(document).ready(function(){
	$('#checkbox').change(function(){
      	$('#container').toggle();
    });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="checkbox" id="checkbox"> Display
<hr/>
<div id="container" style="display:none;">
test
</div>

answered May 9, 2017 at 9:15

Mihai Alexandru-Ionut

48.6k14 gold badges106 silver badges132 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Norbert Laza Over a year ago

I used style="display:block; because I want to hide it when I check something...it works for that but when I uncheck the box it not changing the value of the style="display:none; in to display:block

Code Runner · Accepted Answer · 2017-05-09 09:11:39Z

0

hope this will work

$('.checkbox').change(function(){
    if(this.checked)
        $('somediv').fadeIn('slow');
    else
        $('somediv').fadeOut('slow');

});

answered May 9, 2017 at 9:11

Code Runner

231 silver badge4 bronze badges

Comments

Ahmed Ginani · Accepted Answer · 2017-05-09 09:18:34Z

0

I have set some code for you. It is working. I hope this will be helpful for you.

$(document).ready(function(){
 $('input.myCheckbox').click(function(){
   if($(this).prop('checked')) {
   alert(1);
   	$('.categorydesc').hide();
   }
   else{
   	$('.categorydesc').show();
   }
   });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<ul id="ul_layered_id_feature_10" class="col-lg-12">

  <li id="layered_id_feature_10" class="checkbox">
    Test<input type="checkbox" class="myCheckbox" />
  </li>
  <li id="layered_id_feature_9" class="checkbox">
    Test<input type="checkbox" class="myCheckbox" />
  </li>

</ul>

<div class="categorydesc">
	<p>Content</p>
</div>

answered May 9, 2017 at 9:18

Ahmed Ginani

6,6452 gold badges17 silver badges33 bronze badges

3 Comments

Norbert Laza Over a year ago

Thanks. Works. But there is a problem...when I uncheck the element the .show property is not working....

Norbert Laza Over a year ago

<div id="categorydesc" class="row category hidden-xs hidden-sm" style="display: none;"> style="display: none; is set in motion when I check something but the display property is not changing to display:block when I uncheck the element...

Ahmed Ginani Over a year ago

You can try something like this when uncheck: $('.categorydesc').css("display","block"); instead of "$('.categorydesc').show();" if show is not working for you.

Ahmed Ginani · Accepted Answer · 2017-05-09 09:19:22Z

You can use the following code:

$(document).ready(function(){
  $('#checker').change(function(){
      if($(this).is(':checked'))
      {
      	$('#data').show();
      }
      else
      {
      	$('#data').hide();
      }
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="checkbox" id="checker"> Display
<hr/>
<div id="data" style="display:none;">
em Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum
</div>

What we are doing here is:

we listen for a change event of our checkbox with id = checker.

As soon as a change is detected, we check if the checkbox has been checked or unchecked.

If it is checked then we show the div with id data otherwise hide it.

You can use the above snippet in your case too, by modifying it accordingly.

Collectives™ on Stack Overflow

How to hide a div when checkbox is selected - JQuery

4 Answers 4

1 Comment

Comments

3 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

1 Comment

Comments

3 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related