CODEWITHSUNDEEP
jquerytoggle
jhunlio
jhunlio

Reputation: 2660

How to hide toggle (div) when clicking anywhere on the page

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!!!

Upvotes: 1

Views: 5606

Answers (4)

bamittal
bamittal

Reputation: 140

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

Upvotes: 2

Brendan Smith
Brendan Smith

Reputation: 346

You can bind a click event handler to the html tag:

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

Upvotes: 0

Plynx
Plynx

Reputation: 11461

$(function() {
    $(document).on("click", function(e) {
        if ($(e.srcElement).closest('.selectBoxWrap').length) return;
        if ($('.selectBoxContent').is(":visible")) $('.selectBoxContent').slideToggle('fast');
    });
    $('#selectBox').on("click", function(e) {
        if ($(e.srcElement).closest('.selectBoxWrap').length) return;
        $('.selectBoxContent').slideToggle('fast');
        return false;
    });
});

Fiddle: http://jsfiddle.net/TEyHC/9/

Upvotes: 1

शेखर
शेखर

Reputation: 17614

You can use like this

 $('html').click(function() {
       $('.selectBoxContent').slideToggle('fast');
  });

Here is a fiddle

Upvotes: 0

Related Questions