John Js John Js - 1 month ago 6
CSS Question

Hide element when click on checkbox

I'm trying to hide element when the checkbox is clicked.

Somehow it didn't work -

html

<input type="checkbox" onchange="showAtidit()">
<p id="hidethis">
hide me
</p>


js

function showAtidit($)
{
if ($(this).is(':checked'))
{
alert("not hide");
document.getElementById( "hidethis" ).style.display = 'block';
}
else
{
alert("hide");
document.getElementById( "hidethis" ).style.display = 'none';
}
};


http://jsfiddle.net/wv97mpcp/108/

What's wrong?

Thanks!

Answer

Since you're using jquery just use toggle() :

function showAtidit()
{
   $('#hidethis').toggle();
}

Hope this helps.

function showAtidit()
{
  $('#hidethis').toggle();
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="checkbox"  onchange="showAtidit()">
<p id="hidethis">
hide me
</p>

Comments