平板电脑视图中的折叠面板

Question

I have a toolbar. When I click on it I have many panels appear on the screen as drop-down. In the tablet view I want all the panels to collapse and When I click on the panel-heading I want the panel-body to open. I am poor in css can anyone help me. Here is the code.

<div class="panel-collapse col-md-2 col-sm-4 col-xs-4 collapse in" style="height: auto;">
    <div class="panel-body">
        <div class="panel panel-info">
            <div class="panel-heading">
                <a >First heading</a>
            </div>
            <div class="panel-body">
                <ul class="">
                    <li><a >item1</a></li>
                    <li><a >item2</a></li>
                </ul>
            </div>
        </div>
    </div>
    <div class="panel-collapse col-md-2 col-sm-4 col-xs-4 collapse in" style="height: auto;">
        <div class="panel-body">
            <div class="panel panel-info">
                <div class="panel-heading">
                    <a>second heading</a>
                </div>
                <div class="panel-body">
                    <ul class="">
                        <li><a >item4</a></li>
                        <li><a >item3</a></li>
                    </ul>
                </div>
            </div>
        </div>

Answer 1

As you are using bootstrap accordion. You need to remove class in from your panel-collapse div .

Instead of

<div class="panel-collapse col-md-2 col-sm-4 col-xs-4 collapse in" style="height: auto;">

Write

<div class="panel-collapse col-md-2 col-sm-4 col-xs-4 collapse" style="height: auto;">

in is the class, which makes the content panel visible. So if you want all the panels collapse, remove it form every panel container. If you want only one panel to be visible while others should be collapsed, then put it in that panel container only.

Let me know if this helps. :-)

Answer 2

Bootstrap has specialized classes and data-* attributes for these types of tasks.

1) First, in order to make your panel act as an accordion, you need to give:

<a data-toggle="collapse" data-target="#panel1">Heading</a>

where panel1 is the id of your panel-body .

2) Next, since you want your panel-body to be collapsed at first, give the collapse class next to your panel-body :

<div id="panel1" class="panel-body collapse">

Have a look at the demo here to make things clear.

Answer 3

<div class="panel-body columnBody" id="accordion2">
 <div class="panel panel-info">
  <div class="panel-heading">
   <a data-toggle="collapse" data-parent="#accordion" data-target=".Empty">{{item.key}}</a>
   <button class="btn navbar-btn displayMobile" data-parent="#accordion2" data-target=".view{{$index}}"><span class="caret"></span></button>
  </div>
  <div class="panel-body itemList view{{$index}}">
   <ul style="margin-bottom: 0px;">
    <li ng-repeat="ke in item.values"><a href="#about" data-toggle="collapse" data-parent="#accordion" data-target=".Empty">{{ke}}</a></li>
   </ul>
  </div>
 </div>
</div>

css code:

@media screen and (min-width: 850px){
 .displayMobile{
  display: none;
 }    
 .itemList{
  display: none;
}
}