CODEWITHSUNDEEP
javascripthtmlcsstwitter-bootstrap-4
B Zwikker
B Zwikker

Reputation: 37

Javascript That Determine If Element Is Collapsed

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

Upvotes: 1

Views: 13232

Answers (3)

nh-labs
nh-labs

Reputation: 679

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>

Upvotes: 0

Alessandro
Alessandro

Reputation: 4472

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>

Upvotes: 0

Yury Tarabanko
Yury Tarabanko

Reputation: 45106

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
}

Upvotes: 4

Related Questions