Jquery accordion not collapse by default

前端 未结 2 527
温柔的废话
温柔的废话 2021-02-05 07:02

I am using collapse plugin provided by bootstrap which is a jquery simple plugin

However it collapse by default, how to modify so that the collapse item is hidden by def

相关标签:
2条回答
  • 2021-02-05 07:32

    For Bootstrap 3, some things have changed. The following code accomplishes your desired functionality in Bootstrap 3

    If you want the panel body to show by default:

    <div id="collapseOne" class="panel-collapse collapse in">
    

    If you want the panel body to hide by default:

    <div id="collapseOne" class="panel-collapse collapse">
    

    Here is an example:

    <div class="bs-example">
        <div class="panel-group" id="accordion">
    
              <!- Repeat For Next Panel------->
            <div class="panel panel-default">
                <div class="panel-heading">
                    <h4 class="panel-title">
                        <a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion" href="#collapseOne">
                           xxxxxxxxxxxHERE IS THE HEADER CONTENTSxxxxxxxxxxxx
                        </a>
                    </h4>
               </div>
                   <div id="collapseOne" class="panel-collapse collapse in">
                       <div class="panel-body">
                           xxxxxxxxxxxHERE IS THE BODY CONTENTSxxxxxxxxxxxx
                       </div>
                   </div> 
             </div>
                <!- Repeat For Next Panel---(but change <div id="collapseTwo")--->
    
         </div>
     </div>
    
    0 讨论(0)
  • 2021-02-05 07:33
    <div class="accordion-group collapse">
       <div class="alert alert-info" data-toggle="collapse" href="#collapse1" style="margin-bottom:0px;">                     
              Collapsible #1
       </div>   
       <div id="collapse1" class="accordion-body collapse" style="background-color:#ffffff;">
               content1
       </div>
       <div class="alert alert-info" data-toggle="collapse" href="#collapse2" style="margin-bottom:0px;">                     
              Collapsible #2
        </div>   
        <div id="collapse2" class="accordion-body collapse" style="background-color:#ffffff;">
              content2
        </div>
    </div>
    
    0 讨论(0)
提交回复
热议问题