jQuery Forum

Hello,

I have 3 checkboxes that when true show hidden divs. So i wrote 40 lines of java to first see if the box is checked if so then show the div if not hide it. Here's where things get tricky, the 2nd the 3rd checkbox both have to equal false or unchecked for the div to be hidden else i want the div to show. The or statement on page load checks to see if either of the options are checked if so it shows it. The problem is that in order for the on check action i feel that i have WAY to much script to do what i'm trying to do. If someone could look at this and help me refactor it to make it smaller that would be great. I'm not very experience in JavaScript or JQuery. I know i'm using JavaScript if statments because i could't figure it out in JQuery.

Anyhelp would be great here is the javascript:

   <script language="javascript" type="text/javascript">
      jQuery(document).ready(function($) {
      //see if allow comment is checked on page load
      if ($('#allow_comments').is(':checked'))
         {$('#comments_options').show();}
        else 
         {$('#comments_options').hide('fast');}
         
      //see if share or original links are checked on page load
      if (($('#enable_share').is(':checked')) || ($('#enable_external_link').is(':checked')) )
         {$('#position_option').show();}
        else 
         {$('#position_option').hide('fast');}
      
      //toggle status of allow comments on click
      $('#allow_comments').click(function(){
        if ($('#allow_comments').is(':checked'))
         {$('#comments_options').show('fast');}
        else
         {$('#comments_options').hide('fast');}
      });
      //toggle status of share and original links on click
      $('#enable_share').click(function(){
        if ($('#enable_share').is(':checked'))
         {$('#position_option').show('fast');}
      
      else if ($('#enable_external_link').is(':checked'))
         {$('#position_option').show('fast');}
        else
         {$('#position_option').hide('fast');}
      });
         $('#enable_external_link').click(function(){
        if ($('#enable_external_link').is(':checked'))
         {$('#position_option').show('fast');}
      
      else if ($('#enable_share').is(':checked'))
         {$('#position_option').show('fast');}
        else
         {$('#position_option').hide('fast');}
      });
     });
   
   
      </script>

and the html for the first div :

<li><input type="checkbox" name="allow_comments" value="true"  id="allow_comments" > Allow comments inside Facebook<div id="comments_options"><input type="checkbox" name="require_email" value = "true"> Require Comment Authors E-mail Address</div> </li>

and the second div:

<li><input type="checkbox" name="enable_share" value="true" id="enable_share"> Enable "Share This Post" (in Facebook)</li><li><input type="checkbox" name="enable_external_link" value="true"checked id="enable_external_link"> Enable "view post at external site" link</li><div id="position_option"><li>Link Position for share button and external link button (on both single and list views):<br/><input type="radio" name="links_position" value = "top">Top <input type="radio" name="links_position" value = "bottom"> Bottom <br/></li></div>

Thank You so much for any help. This is for an open source wordpress plugin.

Brandon

[/code]