Question

I used toggle to Hide/Show DIV

HTML

<div class="wrap">

  <h1 id="selectBox">Service you&#39;re interested in</h1>

  <div class="selectBox">
    <div class="selectBoxWrap">

      <ul class="selectBoxContent">
        <li><input type="checkbox" name="#" value="New Web Site" /> <span class="innerPageSelect">Website Design and Development</span></li>
        <li><input type="checkbox" name="#" value="New Web Site" /> <span>Website Maintenance</span></li>
        <li class="other">
          <p>
            <label for="other">Other</label><br />
        <input type="text" name="other" value="" id="other" />
          </p>
         </li>
       </ul> 

      </div>
    </div>
</div>

JQUERY

$(function() {

            $('#selectBox').click(function() {
        $('.selectBoxContent').slideToggle('fast');
        return false;

    });
        });

i want, hide toggle div when clicking anywhere on the page after selecting services by checking the checkbox or input something in the textbox.

this is my fiddle here

your comment and suggestion is appreciated

thank you in advance!!!

Answer 1

Use this

$(document).click(function() {
 $('.selectBoxContent').slideUp('fast');
});

$(".selectBoxContent").click(function(e) { // Wont toggle on any click in the div
e.stopPropagation();
});

Check this Fiddle