保持列表组打开桌面 - 引导程序

Question

How do I keep the list-group open for desktop(md) device size. As of now it is functioning great as per tablet and mobile screen size. I want all the collapsed div's to be open for desktop screen size.

Here is a DEMO

Just to make it more clear:

/*Extra small devices Phones (<768px)*/
@media only screen and (min-width:768px){
   .......work as it is
}

/*Small devices Tablets (≥768px)*/  
@media only screen and (max-width:768px){
    .......work as it is
}
/*Medium devices Desktops (≥992px)*/    
@media only screen and (max-width:992px){
    ....need the new behavior
}

Like this:

Expand
 Color
  Black
  White
 Size
  S
  M
 Fabric
  Cotton
  Lycra

here is the code I am working on

<div id="MainMenu" class="container">
    <div class="list-group panel">
        <a href="#demo3" style="color:black" class="list-group-item strong" data-toggle="collapse" data-parent="#MainMenu">Expand<span class="plussign" style="color:#DC5034"><i class="fa fa-caret-down"></i></span></a>
        <div class="collapse in" id="demo3">
            <a href="#SubMenu6" class="list-group-item strong" data-toggle="collapse" data-parent="#SubMenu6">Color<span class="plussign"><i class="fa fa-plus"></i></span></a>
            <div class="collapse in list-group-submenu" id="SubMenu6">
                <div class="checkbox">
                    <label><input type="checkbox" value="">Black</label>
                </div>
                <div class="checkbox">
                    <label><input type="checkbox" value="">White</label>
                </div>

            </div>
            <a href="#SubMenu2" class="list-group-item strong" data-toggle="collapse" data-parent="#SubMenu2">Size<span class="plussign"><i class="fa fa-plus"></i></span></a>
            <div class="collapse in list-group-submenu" id="SubMenu2">
                <div class="checkbox">
                    <label><input type="checkbox" value="">S</label>
                </div>
                <div class="checkbox">
                    <label><input type="checkbox" value="">M</label>
                </div>

            </div>
            <a href="#SubMenu3" class="list-group-item strong" data-toggle="collapse" data-parent="#SubMenu3">Fabric<span class="plussign"><i class="fa fa-plus"></i></span></a>
            <div class="collapse in list-group-submenu" id="SubMenu3">
                <div class="checkbox">
                    <label><input type="checkbox" value="">Cotton</label>
                </div>
                <div class="checkbox">
                    <label><input type="checkbox" value="">Lycra</label>
                </div>
            </div>
        </div>
    </div>
</div>

Answer 1

Add .in to #demo3

As in: <div class="collapse in" id="demo3">

This will display the list expanded by default (but it can still be collapsed if needed)

UPDATE

Based on comments:

 // Wrap everything in an IIFE $(window).resize(function() { // Executes in MD and LG breakpoints if ($(this).width() >= 992) { // expand collapsible toggle in demo3 (add other selectors as needed) $("#demo3").addClass('in'); } }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script> <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" /> <div id="MainMenu" class="container"> <div class="list-group panel"> <a href="#demo3" style="color:black" class="list-group-item strong" data-toggle="collapse" data-parent="#MainMenu">Expand<span class="plussign" style="color:#DC5034"><i class="fa fa-caret-down"></i></span></a> <div class="collapse" id="demo3"> <a href="#SubMenu6" class="list-group-item strong" data-toggle="collapse" data-parent="#SubMenu6">Color<span class="plussign"><i class="fa fa-plus"></i></span></a> <div class="collapse list-group-submenu" id="SubMenu6"> <div class="checkbox"> <label> <input type="checkbox" value="">Black</label> </div> <div class="checkbox"> <label> <input type="checkbox" value="">White</label> </div> </div> <a href="#SubMenu2" class="list-group-item strong" data-toggle="collapse" data-parent="#SubMenu2">Size<span class="plussign"><i class="fa fa-plus"></i></span></a> <div class="collapse list-group-submenu" id="SubMenu2"> <div class="checkbox"> <label> <input type="checkbox" value="">S</label> </div> <div class="checkbox"> <label> <input type="checkbox" value="">M</label> </div> </div> <a href="#SubMenu3" class="list-group-item strong" data-toggle="collapse" data-parent="#SubMenu3">Fabric<span class="plussign"><i class="fa fa-plus"></i></span></a> <div class="collapse list-group-submenu" id="SubMenu3"> <div class="checkbox"> <label> <input type="checkbox" value="">Cotton</label> </div> <div class="checkbox"> <label> <input type="checkbox" value="">Lycra</label> </div> </div> </div> </div> </div>