jquery accordion應該在點擊標題div後顯示內容

我有下面的代碼，在頁面重新加載後立即顯示容器。點擊<a>標籤後，我想讓容器可見。jquery accordion應該在點擊標題div後顯示內容

例如，如果容器包含'hello world'，則在點擊鏈接後該文本應該出現，並且圖標應該變爲加號。

<html> 
<head> 
    <script src="https://code.jquery.com/ui/1.12.0/jquery-ui.js"></script> 
    <link rel="stylesheet" href="https://code.jquery.com/ui/1.12.0/themes/base/jquery-ui.css"> 
</head> 

<body> 
    <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.7/js/bootstrap.min.js"></script> 
    <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/> 

    <div class="panel-group" id="accordion"> 
    <div class="panel panel-default"> 
     <div class="panel-heading"> 
      <h4 class="panel-title"> 
       <a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion" href="#panel1"><i class="glyphicon glyphicon-plus"></i>Antipasti</a> 
      </h4> 
     </div> 
    <div id="panel1" class="panel-collapse collapse in"> 
     <div class="panel-body"> 
      hello world!!! 
       </div> 
      </div> 
     </div> 
    </div> 


    <script type="text/javascript"> 
    var selectIds =$('#panel1'); 
    $(function ($) { 


     selectIds.on('hidden.bs.collapse show.bs.collapse', function() { 
      $(this).prev().find('.glyphicon').toggleClass('glyphicon-plus glyphicon-minus'); 
    }) 
    }); 

    </script> 
</body> 
</html>

來源

2016-07-26 Rashmi S

從該行中刪除類in

<div id="panel1" class="panel-collapse collapse"><!-- <-- removed class "in" -->

Here's a bootply so you can see it in action

來源

2016-07-26 14:17:41

謝謝你這麼多 –

不客氣，很高興它幫助 - 當你可以請接受答案 –

jquery accordion應該在點擊標題div後顯示內容

回答

相關問題