bootstrap 3 collapse div if not data-parent

Giving up on get all collapses closed when click another collapse.

I have several collapse groups running as a multi-level menu generated by php/mysql.

Basically it works very well, except for one tiny issue. When i click a parent element from another group, i want all other parents closed.

A full HTML copy of my running menu can be seen here : jsFiddle

HTML:

<div class="panel panel-default">
    <div class="panel-heading">Categories</div>
    <div id="menu" class="panel-body">
        <div parentid="cPath_1" class="list-group" style="margin-bottom: -2px;">
            <li class="list-group-item list-group-item-danger"><a href="index.php?cPath=1">Hardware</a><a href="#cpath_1" data-toggle="collapse" data-parent="#cpath_1"><span class="toggleMe glyphicon pull-right glyphicon-chevron-down"></span></a>
            </li>
            <div id="cpath_1" class="list-group collapse in" style="margin-bottom: -2px; height: auto;">
                <div parentid="cPath_17" class="list-group" style="margin-bottom: -2px;">
                    <li class="list-group-item list-group-item-danger"><a href="index.php?cPath=1_17">CDROM Drives</a><a class="collapsed" href="#cpath_17" data-toggle="collapse" data-parent="#cpath_1"><span class="toggleMe glyphicon pull-right glyphicon-chevron-down"></span></a>
                    </li>
                    <div id="cpath_17" class="list-group collapse in" style="margin-bottom: -2px; height: auto;">
                        <div parentid="cPath_22" class="list-group" style="margin-bottom: -2px;">
                            <li class="list-group-item list-group-item-danger"><a href="index.php?cPath=1_17_22">Testcat</a><a class="" href="#cpath_22" data-toggle="collapse" data-parent="#cpath_1"><span class="toggleMe glyphicon pull-right glyphicon-chevron-down"></span></a>
                            </li>
                            <div id="cpath_22" class="list-group collapse in" style="margin-bottom: -2px; height: auto;">
                                <div parentid="cPath_23" class="list-group" style="margin-bottom: -2px;">
                                    <li class="list-group-item list-group-item-warning"><a href="index.php?cPath=1_17_22_23">Testcat2</a>
                                    </li>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div parentid="cPath_4" class="list-group" style="margin-bottom: -2px;">
                    <li class="list-group-item list-group-item-warning"><a href="index.php?cPath=1_4">Graphics Cards</a>
                    </li>
                </div>
                <div parentid="cPath_8" class="list-group" style="margin-bottom: -2px;">
                    <li class="list-group-item list-group-item-warning"><a href="index.php?cPath=1_8">Keyboards</a>
                    </li>
                </div>
                <div parentid="cPath_16" class="list-group" style="margin-bottom: -2px;">
                    <li class="list-group-item list-group-item-warning"><a href="index.php?cPath=1_16">Memory</a>
                    </li>
                </div>
                <div parentid="cPath_9" class="list-group" style="margin-bottom: -2px;">
                    <li class="list-group-item list-group-item-warning"><a href="index.php?cPath=1_9">Mice</a>
                    </li>
                </div>
                <div parentid="cPath_6" class="list-group" style="margin-bottom: -2px;">
                    <li class="list-group-item list-group-item-warning"><a href="index.php?cPath=1_6">Monitors</a>
                    </li>
                </div>
                <div parentid="cPath_5" class="list-group" style="margin-bottom: -2px;">
                    <li class="list-group-item list-group-item-warning"><a href="index.php?cPath=1_5">Printers</a>
                    </li>
                </div>
                <div parentid="cPath_7" class="list-group" style="margin-bottom: -2px;">
                    <li class="list-group-item list-group-item-warning"><a href="index.php?cPath=1_7">Speakers</a>
                    </li>
                </div>
            </div>
        </div>
        <div parentid="cPath_2" class="list-group" style="margin-bottom: -2px;">
            <li class="list-group-item list-group-item-info"><a href="index.php?cPath=2">Software</a><a class="collapsed" href="#cpath_2" data-toggle="collapse" data-parent="#cpath_2"><span class="toggleMe glyphicon pull-right glyphicon-chevron-right"></span></a>
            </li>
            <div id="cpath_2" class="list-group collapse" style="margin-bottom: -2px; height: 0px;">
                <div parentid="cPath_19" class="list-group" style="margin-bottom: -2px;">
                    <li class="list-group-item list-group-item-warning"><a href="index.php?cPath=2_19">Action</a>
                    </li>
                </div>
                <div parentid="cPath_18" class="list-group" style="margin-bottom: -2px;">
                    <li class="list-group-item list-group-item-warning"><a href="index.php?cPath=2_18">Simulation</a>
                    </li>
                </div>
                <div parentid="cPath_20" class="list-group" style="margin-bottom: -2px;">
                    <li class="list-group-item list-group-item-warning"><a href="index.php?cPath=2_20">Strategy</a>
                    </li>
                </div>
            </div>
        </div>
        <div parentid="cPath_3" class="list-group" style="margin-bottom: -2px;">
            <li class="list-group-item list-group-item-info"><a href="index.php?cPath=3">DVD Movies</a><a href="#cpath_3" data-toggle="collapse" data-parent="#cpath_3"><span class="toggleMe glyphicon glyphicon-chevron-right pull-right"></span></a>
            </li>
            <div id="cpath_3" class="list-group collapse" style="margin-bottom: -2px;">
                <div parentid="cPath_10" class="list-group" style="margin-bottom: -2px;">
                    <li class="list-group-item list-group-item-warning"><a href="index.php?cPath=3_10">Action</a>
                    </li>
                </div>
                <div parentid="cPath_13" class="list-group" style="margin-bottom: -2px;">
                    <li class="list-group-item list-group-item-warning"><a href="index.php?cPath=3_13">Cartoons</a>
                    </li>
                </div>
                <div parentid="cPath_12" class="list-group" style="margin-bottom: -2px;">
                    <li class="list-group-item list-group-item-warning"><a href="index.php?cPath=3_12">Comedy</a>
                    </li>
                </div>
                <div parentid="cPath_15" class="list-group" style="margin-bottom: -2px;">
                    <li class="list-group-item list-group-item-warning"><a href="index.php?cPath=3_15">Drama</a>
                    </li>
                </div>
                <div parentid="cPath_11" class="list-group" style="margin-bottom: -2px;">
                    <li class="list-group-item list-group-item-warning"><a href="index.php?cPath=3_11">Science Fiction</a>
                    </li>
                </div>
                <div parentid="cPath_14" class="list-group" style="margin-bottom: -2px;">
                    <li class="list-group-item list-group-item-warning"><a href="index.php?cPath=3_14">Thriller</a>
                    </li>
                </div>
            </div>
        </div>
        <div parentid="cPath_21" class="list-group" style="margin-bottom: -2px;">
            <li class="list-group-item list-group-item-warning"><a href="index.php?cPath=21">Gadgets</a>
            </li>
        </div>
    </div>
</div>

JS:

//if click chevron's
$('.toggleMe').click(function(){

var parent = $(this).closest('.list-group').attr('parentid').split( "_" )[1];
$(this).toggleClass('glyphicon-chevron-down glyphicon-chevron-right');
$(this).closest('.list-group-item').toggleClass('list-group-item-danger list-group-item-info');
//$( '.list-group' ).not('#cpath_'+parent+'').toggle();
//alert('cPath_'+parent); //this is the required main value , all elements inside this should stay open if are open

});

on first load see all parents. when click hardware chevron, menu expands. But now when decide to click software , hardware stays open.

Answers


First of all, the collapsing of other panels is dependent on the DOM structure. Each panel should be wrapped in a div with the class '.panel'. You can refer the issue for more details.

Second, the data-parent attribute should refer to the element that wraps all the panels, which you want only one of them to be open.

 <div id="menu" class="panel-body">    
<div parentid="cPath_1" class="list-group panel" style="margin-bottom: -2px;">
                <li class="list-group-item list-group-item-danger"><a href="index.php?cPath=1">Hardware</a><a href="#cpath_1" data-toggle="collapse" data-parent="#menu"><span class="toggleMe glyphicon pull-right glyphicon-chevron-down"></span></a>
                </li>
                <div id="cpath_1" class="list-group collapse in" style="margin-bottom: -2px; height: auto;">
                    <div parentid="cPath_17" class="list-group" style="margin-bottom: -2px;">
                        <li class="list-group-item list-group-item-danger"><a href="index.php?cPath=1_17">CDROM Drives</a><a class="collapsed" href="#cpath_17" data-toggle="collapse" data-parent="#cpath_1"><span class="toggleMe glyphicon pull-right glyphicon-chevron-down"></span></a>
                        </li>
                    </div>
                </div>
    </div>
</div>

Here is your modified code http://jsfiddle.net/zbrhu/1/


Need Your Help

Copy a CSS class value and generate a new value?

jquery html css

I am using a grid system for my web page layout, much like the Grid 960 layout. I have a bunch of predefined classes for all the grid widths. When I want a div to be a certain width, I simply do:

Microsoft Translate API for Android gives UnknownHostException

java android language-translation microsoft-translator unknown-host

I have tried the following code to implement a translator app using Microsoft Translator API library found here. I have a working internet connection and I have generated the a valid client id and ...