Javascript That Determine If Element Is Collapsed

jquery check toggle state
aria-expanded
how to check toggle button is on or off in jquery
mdb collapse
bootstrap toggle
jquery accordion check if collapsed
data-target
collapse css

I'm trying to close an element when another element collapses but I can't find an answer that works for me.

I update the structure using Bootstrap and JavaScript it doesn't look like the real deal. But when I collapse the first sub-menu (<div class="collapse list-group-sub-menu spacer" id="subMenu1">), I want to collapse the first sub-menu and second sub-menu as well. For my project the divisions are all in rows otherwise I already had a method.

HTML

<div class="container">
    <div class="row">
        <div class="col-md-6">
            <table class="table table-responsive">
                <tbody>
                    <tr>
                        <td class="col-lg-10">
                            <div id="bar1">
                                <div class="list-group panel">
                                    <a class="list-group-item list-group-item-warning">Menu</a>
                                    <!--"collapse in" zodat hij van het begin al open is-->
                                </div>
                            </div>
                        </td>
                    </tr>
                </tbody>
            </table>
            <table class="table table-responsive">
                <tr>
                    <td>
                        <div class="collapse in " id="sidebar1">
                            <!--Javascript klik hier-->
                            <a href="#subMenu1" onclick="SubMenu()" class="list-group-item" data-parent="#sidebar1" data-toggle="collapse">Item 1 <i class="fa fa-caret-down"></i></a>
                            <a href="#" class="list-group-item">Item 2</a>
                            <a href="#" class="list-group-item">Item 3</a>
                            <a href="#" class="list-group-item">Nieuw <i class="fa fa-plus-circle"></i></a>
                        </div>
                    </td>
                </tr>
            </table>
            <table class="table table-responsive">
                <tr>
                    <td>
                        <div class="collapse list-group-submenu spacer" id="subMenu1">
                            <a href="#" class="list-group-item" data-parent="#subMenu1">Item 1.1</a>
                            <a href="#" class="list-group-item" data-parent="#subMenu1">Item 1.2</a>
                            <a href="#subSubMenu1" onclick="SubSubMenu()" class="list-group-item" data-toggle="collapse">Item 1.3 <i class="fa fa-caret-down"></i></a>
                            <a href="#" class="list-group-item">Item 1.4</a>
                            <a href="#" class="list-group-item">Nieuw <i class="fa fa-plus-circle"></i></a>
                        </div>
                    </td>
                </tr>
            </table>
            <table class="table table-responsive">
                <tr>
                    <td>
                        <div class="collapse list-group-submenu list-group-submenu-1 spacer" id="subSubMenu1">
                            <a href="#" class="list-group-item">Item 1.3.1</a>
                            <a href="#" class="list-group-item">Item 1.3.2</a>
                            <a href="#" class="list-group-item">Nieuw <i class="fa fa-plus-circle"></i></a>
                        </div>
                    </td>
                </tr>
            </table>
        </div>
        <div class="col-md-6">
            <table class="table table-responsive">
                <tbody>
                    <tr>
                        <td class="col-lg-10">
                            <div id="bar2">
                                <div class="list-group panel">
                                    <a class="list-group-item list-group-item-warning">Menu</a>
                                    <!--"collapse in" zodat hij van het begin al open is-->
                                </div>
                            </div>
                        </td>
                    </tr>
                </tbody>
            </table>
            <table class="table table-responsive">
                <tr>
                    <td>
                        <div class="collapse in " id="sidebar2">
                            <!--Javascript klik hier-->
                            <p class="list-group-item" data-parent="#sidebar2">Item 1</p>
                            <p class="list-group-item">Select
                                <input type="checkbox" /> </p>
                            <p class="list-group-item">Select
                                <input type="checkbox" />
                            </p>
                            <a href="#" class="list-group-item">Nieuw <i class="fa fa-plus-circle"></i></a>
                        </div>
                    </td>
                </tr>
            </table>
            <table class="table table-responsive">
                <tr>
                    <td>
                        <div class="collapse list-group-submenu" id="subMenu2">
                            <p class="list-group-item" data-parent="#subMenu2">Select
                                <input type="checkbox" />
                            </p>
                            <p class="list-group-item" data-parent="#subMenu2">Select
                                <input type="checkbox" />
                            </p>
                            <p class="list-group-item">Item 1.3</p>
                            <p class="list-group-item">Select
                                <input type="checkbox" />
                            </p>
                            <p class="list-group-item">Nieuw <i class="fa fa-plus-circle"></i></p>
                        </div>
                    </td>
                </tr>
            </table>
            <table class="table table-responsive">
                <tr>
                    <td>
                        <div class=" collapse list-group-submenu list-group-submenu-2" id="subSubMenu2">
                            <p class="list-group-item">Select
                                <input type="checkbox" />
                            </p>
                            <p class="list-group-item">Select
                                <input type="checkbox" /> </p>
                            <p class="list-group-item">Nieuw <i class="fa fa-plus-circle"></i></p>
                        </div>
                    </td>
                </tr>
            </table>
        </div>
    </div>
</div>

SCRIPTS

function SubMenu() {

    $('#subMenu1').collapse("toggle");

    $('#subMenu1').is('collapse', function() {
        SubSubMenu();
    });
}


function SubSubMenu() {
    $('#subSubMenu1').collapse("toggle");
    $('#subSubMenu2').collapse("toggle");
}

According to Docs bootstrap collapse use css classes to indicate state

.collapse hides content

.collapsing is applied during transitions

.collapse.show shows content

You can use .collapse:not(.show) selector to check if collapsible element is collapsed.

if($('#subMenu1').is('.collapse:not(.show)')) {
    // do smth
}

How to determine if a bootstrap collapse is opening or closing , Bootstrap uses the aria-expanded attribute to show true or false if the region ://​ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <script I needed a way to determine if the element was collapsed BEFORE  Note: When an element is hidden with display:none (like in the example above), the element will not take up any space. To find out if an element is hidden with visibility:hidden, see the example below. This "hidden" element will take up space.

You could hide "child collapsible elements" when its parent is been hided, that is on('hidden.bs.collapse', function), see following snippet:

$("#collapse1").on('hidden.bs.collapse', function(){
  $("#collapse1 .collapse").collapse('hide');
});
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.0/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

<div class="panel-group">
  <div class="panel panel-default">
    <div class="panel-heading">
      <h4 class="panel-title">
        <a id="lnk1" data-toggle="collapse" data-target="#collapse1" href="#collapse1">Menu 1</a>
      </h4>
    </div>
    <div id="collapse1" class="panel-collapse collapse">
      <div class="panel panel-default">
          <h3 class="panel-title">
            <a data-toggle="collapse" href="#collapse2">Sub menu 1</a>
          </h3>
      </div>
      <ul class="list-group">
        <li class="list-group-item">
          <div id="collapse2" class="panel-collapse collapse">
            <ul class="list-group">
            <li class="list-group-item">Item 1</li>
            <li class="list-group-item">Item 2</li>
            </ul>
          </div>
        </li>
      </ul>
    </div>
  </div>
</div>

How do I determine the state of a toggled element?, You can determine whether an element is collapsed or not by using the :visible and :hidden selectors. 1. 2. 3. var isVisible = $( "#myDiv"  You can determine whether an element is collapsed or not by using the :visible and :hidden selectors.

If you like a plain vanilla javascript solution (which you asked for originally...) here is a general approach could be adapted to your case.

I took the html markup from Bootstrap4 and added an id selector.

<button class="btn btn-lightgreen" type="button" id="collapsebutton" data-toggle="collapse" data-target="#collapseExample" aria-expanded="false" aria-controls="collapseExample">Button with data-target</button>
<div class="collapse" id="collapseExample">
<div class="card card-body">Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident.
</div>

<script>
 var clickbutton = document.getElementById('collapsebutton');
 clickbutton.addEventListener('click', collapseclick);
 function collapseclick () {
   var closed =  this.getAttribute('aria-expanded');
   if (closed=='false') {
     alert("now open");
     //do stuff...
   }
 }
</script>

Bootstrap JS Collapse Reference, JS Collapse (collapse.js). Get base See options above for valid values hide.​bs.collapse, Occurs when the collapsible element is about to be hidden, Try it. Just add data-toggle="collapse" and a data-target to element to automatically assign control of a collapsible element. The data-target attribute accepts a CSS selector to apply the collapse to. Be sure to add the class collapse to the collapsible element. If you'd like it to default open, add the additional class in.

Bootstrap 4 JS Collapse Reference, Bootstrap 4 JS Collapse. ❮ Previous See options above for valid values show.bs.collapse, Occurs when the collapsible element is about to be shown, Try it. Given an HTML element and the task is to determine whether its content is overflow or not using JavaScript. Approach: Select the element to check form overflow.

How to know div is collapse or not?, Hi, how to know div is collapse or expanded in jquery..actually based on that i want to decide top position of the my filter criteria. When i click on  The visibility property allows the author to show or hide an element. It is similar to the display property. However, the difference is that if you set display:none , it hides the entire element, while visibility:hidden means that the contents of the element will be invisible, but the element stays in its original position and size.

Collapse · Bootstrap, The collapse JavaScript plugin is used to show and hide content. Multiple <​button> or <a> can show and hide an element if they each reference it with their href or data-target See our JavaScript documentation for more information. Expand and Collapse Elements in JavaScript JavaScript is a client side scripting language that runs in browser. Often you would have seen animations on your websites even If they are disconnected from the server.

Comments
  • Could you add some HTML Code aswell?
  • @NullDev I've updated my post with some more information
  • How is .collapse implemented?
  • @YuryTarabanko it's part of the bootstrap library and I use it to (as defined above) to toggle the collapse status. But I can't seem to get the value back if it's collapsed or not
  • If anyone has an idea without javascript it's fine aswell
  • @BZwikker No problem.