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

MailChimp API V2.0 SSL error solution

I got this SSL error while trying to use MailChimp API V2.0 in my localhost. Fatal error: Uncaught exception 'Mailchimp_HttpError' with message 'API call to lists/list failed: SSL certificate problem, verify that the CA cert is OK. Details: error:14090086:SSL routines:SSL3_GET_SERVER_CERTIFICATE:certificate verify failed' in C:\Installation\xampp\htdocs\mailchimp-test\Mailchimp.php:192 Stack trace: #0 C:\Installation\xampp\htdocs\mailchimp-test\mailchimp-api.php(16): Mailchimp->call('lists/list', Array) #1 {main} thrown in C:\Installation\xampp\htdocs\mailchimp-test\Mailchimp.php on line 192 To resolve this, you can try any of the methods below. Method 1: Download cacert.pem file from here: http://curl.haxx.se/docs/caextract.html Save the file in your PHP installation folder. I am using xampp. So I saved it in C:\Installation\xampp\php\cacert.pem Open your php.ini file and add this line: curl.cainfo="C:\Installation\xampp\php\cacert.pem&quo
Read more