ブートストラップを使ってアコーディオンの表示/非表示を完了

Question

これで今日はブートストラップで始まり、1つのトグルが機能するようになっています。あなたがコードを実行すると、最初のウィンドウだけが情報を表示しているのが分かります。私が助けが必要なのは、一度に1つの隠しテキストしか表示できないので、助けが必要です。最初の隠しテキストがページの読み込み時に表示されるようにします。 *これは重複した投稿ではなく、私はうまく働いていますが、非常に反応が良くなく、かなり遅れていて、Bootstrapを試してみると非常に有望です。

#leftpanel h1 {font-size: 18px; font-family: 'Montserrat bold'; color:#b0a887; border-top: 1px solid #b0a887; font-style: normal;} 
 
#leftpanel h2 {font-size: 18px; font-family: 'Montserrat bold'; color:#b0a887; font-style: normal;} 
 
#leftpanel a {margin-left: 230px;} 
 
#demo { color: #333; font-size: 14px;} 
 

 

 

 
.collapse {} 
 
.testver { } 
 

 
.testver hr { 
 

 

 
} 
 

 
.fa-angle-up { 
 
    display: none; 
 
} 
 

 
.testver i { 
 

 
} 
 

 
.testver .fa { 
 
    ; 
 
} 
 

 
.arrow[aria-expanded="true"] .fa-angle-up { 
 
    display: inline-block; 
 
} 
 

 
    .arrow[aria-expanded="true"] .fa-angle-down { 
 
    display: none; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/> 
 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> 
 
<div id="leftpanel"> 
 
       <div class="testver"> 
 
        <h1>First title</h1> 
 

 

 
        <a href="javascript:void(0);" class="arrow" data-toggle="collapse" data-target="#demo"> 
 
         <i class="fa fa-angle-down"><img src="https://cdn3.iconfinder.com/data/icons/faticons/32/arrow-down-01-128.png" width="40" height="40"></i> 
 
         <i class="fa fa-angle-up"><img src="https://cdn3.iconfinder.com/data/icons/faticons/32/arrow-up-01-128.png" width="40" height="40"></i> 
 
        </a> 
 
        <div id="demo" class="collapse"> 
 
         First text 
 
        </div> 
 
        <hr> 
 
       </div> 
 
       <div class="testver"> 
 
        <h2>Second title</h2> 
 

 

 
        <a href="javascript:void(0);" class="arrow" data-toggle="collapse" data-target="#demo"> 
 
         <i class="fa fa-angle-down"><img src="https://cdn3.iconfinder.com/data/icons/faticons/32/arrow-down-01-128.png" width="40" height="40"></i> 
 
         <i class="fa fa-angle-up"><img src="https://cdn3.iconfinder.com/data/icons/faticons/32/arrow-up-01-128.png" width="40" height="40"></i> 
 
        </a> 
 
        <div id="demo" class="collapse"> 
 
         Second text 
 
        </div> 
 
        <hr> 
 
       </div> 
 
       <div class="testver"> 
 
        <h2>Third title</h2> 
 

 

 
        <a href="javascript:void(0);" class="arrow" data-toggle="collapse" data-target="#demo"> 
 
         <i class="fa fa-angle-down"><img src="https://cdn3.iconfinder.com/data/icons/faticons/32/arrow-down-01-128.png" width="40" height="40"></i> 
 
         <i class="fa fa-angle-up"><img src="https://cdn3.iconfinder.com/data/icons/faticons/32/arrow-up-01-128.png" width="40" height="40"></i> 
 
        </a> 
 
        <div id="demo" class="collapse"> 
 
         Third text 
 
        </div> 
 
        <hr> 
 
       </div> 
 
       <div class="testver"> 
 
        <h2>Last title</h2> 
 

 

 
        <a href="javascript:void(0);" class="arrow" data-toggle="collapse" data-target="#demo"> 
 
         <i class="fa fa-angle-down"><img src="https://cdn3.iconfinder.com/data/icons/faticons/32/arrow-down-01-128.png" width="40" height="40"></i> 
 
         <i class="fa fa-angle-up"><img src="https://cdn3.iconfinder.com/data/icons/faticons/32/arrow-up-01-128.png" width="40" height="40"></i> 
 
        </a> 
 
        <div id="demo" class="collapse"> 
 
         Last Text 
 
        </div> 
 
        <hr> 
 
       </div> 
 
      </div>

Answer 1

IDは一意である必要がありますので、ちょうど例えば＃1 DEMO1、＃のDEMO2、＃のdemo3と＃のdemo4に#demoを変更します。それは残りのすべてのdivを非表示にする必要がありますdiv要素をクリックした後

：

：

var currTarget = $(this).closest('a').data('target').substr(1); 
$('#leftpanel').find('[id^="demo"]').not(currTarget).collapse('hide'); 

それはのようにプロパティプラスARIA-expamdedで崩壊を追加する必要があります最初のdivを開く設定するために

<div id="demo1" class="collapse in" aria-expanded="true"> 

スニペット：

$('.testver a i').on('click', function(e) { 
 
    var currTarget = $(this).closest('a').data('target').substr(1); 
 
    $('#leftpanel').find('[id^="demo"]').not(currTarget).collapse('hide'); 
 
});

#leftpanel h1 {font-size: 18px; font-family: 'Montserrat bold'; color:#b0a887; border-top: 1px solid #b0a887; font-style: normal;} 
 
#leftpanel h2 {font-size: 18px; font-family: 'Montserrat bold'; color:#b0a887; font-style: normal;} 
 
#leftpanel a {margin-left: 230px;} 
 
#demo { color: #333; font-size: 14px;} 
 

 

 

 
.collapse {} 
 
.testver { } 
 

 
.testver hr { 
 

 

 
} 
 

 
.fa-angle-up { 
 
    display: none; 
 
} 
 

 
.testver i { 
 

 
} 
 

 
.testver .fa { 
 
    ; 
 
} 
 

 
.arrow[aria-expanded="true"] .fa-angle-up { 
 
    display: inline-block; 
 
} 
 

 
.arrow[aria-expanded="true"] .fa-angle-down { 
 
    display: none; 
 
}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> 
 
<script src="https://code.jquery.com/jquery-2.1.1.min.js"></script> 
 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> 
 

 

 
<div id="leftpanel"> 
 
    <div class="testver"> 
 
     <h1>First title</h1> 
 

 

 
     <a href="javascript:void(0);" class="arrow" data-toggle="collapse" data-target="#demo1" aria-expanded="true"> 
 
      <i class="fa fa-angle-down"><img src="https://cdn3.iconfinder.com/data/icons/faticons/32/arrow-down-01-128.png" width="40" height="40"></i> 
 
      <i class="fa fa-angle-up"><img src="https://cdn3.iconfinder.com/data/icons/faticons/32/arrow-up-01-128.png" width="40" height="40"></i> 
 
     </a> 
 
     <div id="demo1" class="collapse in" aria-expanded="true"> 
 
      First text 
 
     </div> 
 
     <hr> 
 
    </div> 
 
    <div class="testver"> 
 
     <h2>Second title</h2> 
 

 

 
     <a href="javascript:void(0);" class="arrow" data-toggle="collapse" data-target="#demo2"> 
 
      <i class="fa fa-angle-down"><img src="https://cdn3.iconfinder.com/data/icons/faticons/32/arrow-down-01-128.png" width="40" height="40"></i> 
 
      <i class="fa fa-angle-up"><img src="https://cdn3.iconfinder.com/data/icons/faticons/32/arrow-up-01-128.png" width="40" height="40"></i> 
 
     </a> 
 
     <div id="demo2" class="collapse"> 
 
      Second text 
 
     </div> 
 
     <hr> 
 
    </div> 
 
    <div class="testver"> 
 
     <h2>Third title</h2> 
 

 

 
     <a href="javascript:void(0);" class="arrow" data-toggle="collapse" data-target="#demo3"> 
 
      <i class="fa fa-angle-down"><img src="https://cdn3.iconfinder.com/data/icons/faticons/32/arrow-down-01-128.png" width="40" height="40"></i> 
 
      <i class="fa fa-angle-up"><img src="https://cdn3.iconfinder.com/data/icons/faticons/32/arrow-up-01-128.png" width="40" height="40"></i> 
 
     </a> 
 
     <div id="demo3" class="collapse"> 
 
      Third text 
 
     </div> 
 
     <hr> 
 
    </div> 
 
    <div class="testver"> 
 
     <h2>Last title</h2> 
 

 

 
     <a href="javascript:void(0);" class="arrow" data-toggle="collapse" data-target="#demo4"> 
 
      <i class="fa fa-angle-down"><img src="https://cdn3.iconfinder.com/data/icons/faticons/32/arrow-down-01-128.png" width="40" height="40"></i> 
 
      <i class="fa fa-angle-up"><img src="https://cdn3.iconfinder.com/data/icons/faticons/32/arrow-up-01-128.png" width="40" height="40"></i> 
 
     </a> 
 
     <div id="demo4" class="collapse"> 
 
      Last Text 
 
     </div> 
 
     <hr> 
 
    </div> 
 
</div>