toggle实现折叠效果

JS代码：

$(".collapsed").click(function () {
    $(this).parent().parent().parent().children(".collapse").toggle()
});

 

HTML代码：

{% for group in host_group_obj %}

    <div class="group-list">
       <!--Panel heading-->
        <div class="panel-heading">
            <div class="panel-control">
                <button class="btn btn-default collapsed"><i class="fa fa-angle-down fa-3x"></i></button>
            </div>
            <h6 class="panel-title"><input onclick="CheckAllHosts(this)" type="checkbox" style="margin-right: 5px;">{{ group.name }}</h6>
        </div>

        <!--Panel body-->
        <div id="demo-panel-collapse" class="collapse">
            <!--Disabled borders-->
            <!--===================================================-->
            <div class="list-group bord-no" style="margin-left: 20px;">
                {% for host in group.host.all %}
                    <a class="list-group-item" href="#"><input class="host_ele" onclick="CountSelectedHosts()" type="checkbox" style="margin-right: 5px" value={{ host.id }}>{{ host.hostname }}</a>
                {% endfor %}
            </div>
            <!--===================================================-->
        </div>
    </div>

{% endfor %}