Checkbox toggling with jQuery 

<input id="mycheckbox" name="mycheckbox" type="checkbox" value="Y" />My Checkbox - click to toggle
<div id="mydiv" style="display:none;">This is a div that's to be shown/hidden.</div>
$('#mycheckbox').change(function(){ 
       $("#mydiv").slideToggle('slow');
  });
  
  if($('#mycheckbox').is(':checked')){ 
       $("#mydiv").slideToggle('slow');
  };
Here "mycheckbox" is the checkbox id and "mydiv" is the id of div that you want shown/hidden when toggling the checkbox.

See example below:

My Checkbox - click to toggle

Comments

  1. NhoelJuly 12, 2012 at 1:35 AM

    what if i want it reverse?
    show the div when uncheck?
    please help!

    ReplyDelete
    Replies
    1. RWTJuly 26, 2012 at 5:51 PM

      @Nhoel: Then you'd just remove "display:none" from the CSS. This will initially show the content and selecting the checkbox will hide it. Hope this helps.

      Delete
  2. AnonymousMay 19, 2013 at 3:52 PM

    Exactly was I were looking for ... basic and simple jQuery! Thanks mate :-)

    ReplyDelete

Post a Comment

Popular posts from this blog

How to resolve 'res://ieframe.dll/acr_error.htm#' error (Internet Explorer stopped working while viewing a website)

While testing a website I was developing, I got an error message saying "Internet Explorer has stopped working". This is followed by this line added before the URL: res://ieframe.dll/acr_error.htm# . I was using Internet Explorer 11 in Windows 7 64-bit machine. I tried disabling all add-ons in IE but that did not resolve the issue. I've found this solution to my problem: From Tools menu, open "Internet options". Go to the Advanced tab. Under "Accelerated graphics", tick the box that says "Use software rendering instead of GPU rendering". Click Apply and Ok. Test your website. You might need to restart your computer if it does not immediately show any effect. This worked for me.
Read more

htaccess: Redirecting multiple domains to the main domain

Let's say this is the main domain: mywebsite.com.au And you'd like to redirect several other domains that you have purchased to this main domain.The steps shown below redirects all www, non-www, http and https variations and also matches the internal pages. Step 1: Go to your DNS provider's website and point each of those purchased domains to the server that is hosting your main domain. In other words, add the IP address of your hosting server in the A record. Step 2: Log in to your WHM. Then park each domain on top of the main domain. You may be able to do this in cPanel > Aliases but I haven't tried. Step 3: If you have AutoSSL enabled, all the additional parked domains will automatically get SSL added. This may take some time. Alternatively, you can go to WHM > Manage AutoSSL and Run AutoSSL Check. Step 4: Add your parked domains to your .htaccess file as shown below. Note the "$" at the end of this line: ^www\.mywebsite\.com$ . This ...
Read more

Removing index.php in Codeigniter using XAMPP on Windows

Using the method below, you can access your site http://localhost/Mysite/index.php/welcome without the index.php like this: http://localhost/Mysite/welcome I did this in Code Igniter 2.0.3 using XAMPP 1.7.1 on Windows 7. Create .htaccess file in the root folder of code igniter. I got the code below from http://codeigniter.com/wiki/mod_rewrite/ . Make sure you use your site folder name in Rewrite Base below:     RewriteEngine On     RewriteBase /Mysite/     #Removes access to the system folder by users.     #Additionally this will allow you to create a System.php controller,     #previously this would not have been possible.     #'system' can be replaced if you have renamed your system folder.     RewriteCond %{REQUEST_URI} ^system.*     RewriteRule ^(.*)$ /index.php?/$1 [L]         #When your application folder isn't i...
Read more