When I click on outside my expanded div this div should be close.

I have html code like

<div id="panel">
<div>           
        <h1>Wele to jquery demo</h1>
                <h3>Wele to jquery demo</h3>
                <h3>Wele to jquery demo</h3>
                <h3>Wele to jquery demo</h3>
                <h3>Wele to jquery demo</h3>
            </div>
</div>
<div class="tab">
            <ul class="loginleft">
            <button class="sc-button g-opacity-transition sc-button-large loginButton" tabindex="0">Log in</button>

        </ul>
        <ul class="login">
            <li class="left">&nbsp;</li>
            <li>Hello Guest!</li>
            <li class="sep">|</li>
            <li id="toggle">
                <a id="open" class="open" href="#">More Info</a>
                <a id="close" style="display: none;" class="close" href="#">Close Panel</a>         
            </li>
            <li class="right">&nbsp;</li>
        </ul> 
    </div> 

js code

$(document).ready(function() {

    // Expand Panel
    $("#open").click(function(){
        $("div#panel").slideDown("slow");

    }); 

    // Collapse Panel
    $("#close").click(function(){
        $("div#panel").slideUp("slow"); 
    });     


    // Switch buttons from "Log In | Register" to "Close Panel" on click
    $("#toggle a").click(function () {
        $("#toggle a").toggle();
    });     

});

how can i also close that expanded div when i clicked outside area also.

When I click on outside my expanded div this div should be close.

I have html code like

<div id="panel">
<div>           
        <h1>Wele to jquery demo</h1>
                <h3>Wele to jquery demo</h3>
                <h3>Wele to jquery demo</h3>
                <h3>Wele to jquery demo</h3>
                <h3>Wele to jquery demo</h3>
            </div>
</div>
<div class="tab">
            <ul class="loginleft">
            <button class="sc-button g-opacity-transition sc-button-large loginButton" tabindex="0">Log in</button>

        </ul>
        <ul class="login">
            <li class="left">&nbsp;</li>
            <li>Hello Guest!</li>
            <li class="sep">|</li>
            <li id="toggle">
                <a id="open" class="open" href="#">More Info</a>
                <a id="close" style="display: none;" class="close" href="#">Close Panel</a>         
            </li>
            <li class="right">&nbsp;</li>
        </ul> 
    </div> 

js code

$(document).ready(function() {

    // Expand Panel
    $("#open").click(function(){
        $("div#panel").slideDown("slow");

    }); 

    // Collapse Panel
    $("#close").click(function(){
        $("div#panel").slideUp("slow"); 
    });     


    // Switch buttons from "Log In | Register" to "Close Panel" on click
    $("#toggle a").click(function () {
        $("#toggle a").toggle();
    });     

});

how can i also close that expanded div when i clicked outside area also.

• javascript
• jquery
• html
• css

• Where is panel div HTML? – Siva Charan Commented Oct 7, 2013 at 8:24

4 Answers 4

You can add a handler to the document since the click event is not a "flooding" one ...

=> Test whether the event.target was '.close'

$(document).on('click','.close', function(eventObject){
  $('#panel').slideUp("slow"); // useful if you want to put several buttons all over the your content
});

=> Or simply is the event.target outside your panel

Jsfiddle here

(Try not to attach too many greedy handlers to the document to keep your browser reacting fast.)

You can use focusout()

 $("div#panel").focusout(function(){
        $(this).slideUp("slow"); 
    }); 

Bind an event handler to the "focusout" JavaScript event.

See fiddle here

How about handling the event at the document level:

$(document).click(function(e){
    if (event.target.id == "open") {
        $("div#panel").slideDown("slow"); 
    }
    else if (event.target.id == "close") {
        $("div#panel").slideUp("slow"); 
    }
    else {
        $("div#panel").slideUp("slow"); 
    }
});  

Working fiddle: http://jsfiddle/VC9eT/

I have used the following:

<link rel="stylesheet" href="//code.jquery./ui/1.12.1/themes/base/jquery-ui.css">
  <link rel="stylesheet" href="/resources/demos/style.css">
  <script src="https://code.jquery./jquery-1.12.4.js"></script>
  <script src="https://code.jquery./ui/1.12.1/jquery-ui.js"></script>

  <script>
  $( function() {
    $( "#accordion" ).accordion();
  } );
  </script>

HTML Area:

<div id="accordion">
  <h3>Section 1</h3>
  <div>
    <p>
    Mauris mauris ante, blandit et, ultrices a, suscipit eget, quam. Integer
    ut neque. Vivamus nisi metus, molestie vel, gravida in, condimentum sit
    amet, nunc. Nam a nibh. Donec suscipit eros. Nam mi. Proin viverra leo ut
    odio. Curabitur malesuada. Vestibulum a velit eu ante scelerisque vulputate.
    </p>
  </div>
  <h3>Section 2</h3>
  <div>
    <p>
    Sed non urna. Donec et ante. Phasellus eu ligula. Vestibulum sit amet
    purus. Vivamus hendrerit, dolor at aliquet laoreet, mauris turpis porttitor
    velit, faucibus interdum tellus libero ac justo. Vivamus non quam. In
    suscipit faucibus urna.
    </p>
  </div>
  <h3>Section 3</h3>
  <div>
    <p>
    Nam enim risus, molestie et, porta ac, aliquam ac, risus. Quisque lobortis.
    Phasellus pellentesque purus in massa. Aenean in pede. Phasellus ac libero
    ac tellus pellentesque semper. Sed ac felis. Sed modo, magna quis
    lacinia ornare, quam ante aliquam nisi, eu iaculis leo purus venenatis dui.
    </p>
    <ul>
      <li>List item one</li>
      <li>List item two</li>
      <li>List item three</li>
    </ul>
  </div>
  <h3>Section 4</h3>
  <div>
    <p>
    Cras dictum. Pellentesque habitant morbi tristique senectus et netus
    et malesuada fames ac turpis egestas. Vestibulum ante ipsum primis in
    faucibus orci luctus et ultrices posuere cubilia Curae; Aenean lacinia
    mauris vel est.
    </p>
    <p>
    Suspendisse eu nisl. Nullam ut libero. Integer dignissim consequat lectus.
    Class aptent taciti sociosqu ad litora torquent per conubia nostra, per
    inceptos himenaeos.
    </p>
  </div>
</div>

jQuery documentation link:

https://jqueryui./accordion/