methods for collapsing a div panel using jquery

Question

methods for collapsing a div panel using jquery

When I click outside of the expanded div, I want it to close.

This is the HTML code I have:

<div id="panel">
<div>           
        <h1>Welcome to jquery demo</h1>
                <h3>Welcome to jquery demo</h3>
                <h3>Welcome to jquery demo</h3>
                <h3>Welcome to jquery demo</h3>
                <h3>Welcome 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>

This is the 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 the expanded div when clicked outside the area?

javascript jquery html css

Answer 1

Answer №1

To prevent overloading the click event, consider adding a handler to the document instead...

=> Check if the event.target matches '.close'

$(document).on('click','.close', function(eventObject){
  $('#panel').slideUp("slow"); // Ideal for multiple buttons scattered throughout your content
});

=> Alternatively, verify if the event.target is located outside your panel

Link to Jsfiddle page

(Avoid attaching excessive handlers to the document to maintain browser responsiveness.)

Answer 2

To prevent overloading the click event, consider adding a handler to the document instead...

=> Check if the event.target matches '.close'

$(document).on('click','.close', function(eventObject){
  $('#panel').slideUp("slow"); // Ideal for multiple buttons scattered throughout your content
});

=> Alternatively, verify if the event.target is located outside your panel

Link to Jsfiddle page

(Avoid attaching excessive handlers to the document to maintain browser responsiveness.)

Answer 3

Answer №2

To achieve this functionality, you can utilize the focusout() method.

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

Attach an event listener to the "focusout" JavaScript event.

View demonstration on JSFiddle

Answer 4

To achieve this functionality, you can utilize the focusout() method.

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

Attach an event listener to the "focusout" JavaScript event.

View demonstration on JSFiddle

Answer 5

Answer №3

Consider handling the event at the document level for better control:

$(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"); 
    }
});

To see a working example, check out this fiddle: http://jsfiddle.net/VC9eT/

Answer 6

Consider handling the event at the document level for better control:

$(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"); 
    }
});

To see a working example, check out this fiddle: http://jsfiddle.net/VC9eT/

Answer 7

Answer №4

Here are the tools I utilized:

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

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

Including in HTML:

<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 commodo, 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>

For more information on jQuery, visit this link:

https://jqueryui.com/accordion/

Answer 8

Here are the tools I utilized:

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

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

Including in HTML:

<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 commodo, 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>

For more information on jQuery, visit this link:

https://jqueryui.com/accordion/

methods for collapsing a div panel using jquery

Answer №1

Answer №2

Answer №3

Answer №4

Similar questions

Decoding an array in JSON format from PHP

Converting a Selenium By object into a CSS selector: A step-by-step guide

Access the HTML file through the Heroku Bash terminal

Error encountered during sequelize synchronization: SQL syntax issue detected near the specified number

Modifying HTML tag attributes with inline server scripts

Understanding the application of JSON data can be simplified by following these

Looking for assistance on how to conceal the ego_bar on Facebook

Using Threejs to move an object using quaternion rotations

Increasing Gap between Tabs in Primefaces AccordionPanel: A Guide

Is there a way to automatically close the dropdown when a button is clicked?

Add a new value to the translation token using ng-bind

Align both vertically and horizontally in the center of the body

How to create a personalized attribute for a form in Yii2

Insert details into Mysql database

What causes a React Ref callback to be invoked multiple times during the initial loading of a page?

The multiple lines text box displays an input box

AngularJS Error: [$injector:modulerr] - I'm new to this

Why does a black model appear when loading a GLTF model with materials?

What is the best way to recover past messages from a channel?

Utilizing ng-bootstrap within a rebranded module