ブートストラップ4ドロップダウン時にキャレットを変更する

Question

ブートストラップ4を使用して、キャレット付きのドロップダウンを作成しようとしています（例：右を指しています）。ドロップダウンをクリックすると、キャレットのポインティング方向が変更されます（例：下）。

私が持っているway to do that

/*Please refer the above link for full code details*/ 

<a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion" href="#collapseOne"> 
      Collapsible Group Item #1 
</a> 

<div id="collapseOne" class="panel-collapse collapse in"> 
     <div class="panel-body"> 
     This content is hidden 
     </div> 
</div> 

の.css

.panel-heading .accordion-toggle:after { 
    font-family: 'Glyphicons Halflings'; 
    content: "\e114"; 
    float: right; 
    color: grey; 
} 
.panel-heading .accordion-toggle.collapsed:after { 
    content: "\e080"; 
} 

しかし、漁獲量があり、

右でなければなりません下向き最初はすべてのキャレットでありますその他approaches。しかし、私のアプリケーションは角度が4なので、私はJQueryを使いたくありません。可能な限りJQuery/JSを避けたいですか？

これはduplicateの質問ではありません。彼らはGlyphiconsを落としているブートストラップV4で

事前に多くの感謝...

Answer 1

。以下のコードは、あなたの必要に応じてうまくいくでしょう。 ドロップダウンアイコンスタイルでは、素晴らしいフォントを使用できます。ここで

[data-toggle="collapse"]:after { 
 
display: inline-block; 
 
    display: inline-block; 
 
    font: normal normal normal 14px/1 FontAwesome; 
 
    font-size: inherit; 
 
    text-rendering: auto; 
 
    -webkit-font-smoothing: antialiased; 
 
    -moz-osx-font-smoothing: grayscale; 
 
    content: "\f054"; 
 
    transform: rotate(90deg) ; 
 
    transition: all linear 0.25s; 
 
    float: right; 
 
    } 
 
[data-toggle="collapse"].collapsed:after { 
 
    transform: rotate(0deg) ; 
 
}

<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/> 
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-beta/js/bootstrap.min.js"></script> 
 
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-beta/css/bootstrap.min.css" rel="stylesheet"/> 
 

 
<div id="accordion" role="tablist"> 
 
    <div class="card"> 
 
    <div class="card-header" role="tab" id="headingOne"> 
 
     <h5 class="mb-0"> 
 
     <a data-toggle="collapse" href="#collapseOne" aria-expanded="true" aria-controls="collapseOne"> 
 
      Collapsible Group Item #1 
 
     </a> 
 
     </h5> 
 
    </div> 
 

 
    <div id="collapseOne" class="collapse show" role="tabpanel" aria-labelledby="headingOne" data-parent="#accordion"> 
 
     <div class="card-body"> 
 
     Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS. 
 
     </div> 
 
    </div> 
 
    </div> 
 
    <div class="card"> 
 
    <div class="card-header" role="tab" id="headingTwo"> 
 
     <h5 class="mb-0"> 
 
     <a class="collapsed" data-toggle="collapse" href="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo"> 
 
      Collapsible Group Item #2 
 
     </a> 
 
     </h5> 
 
    </div> 
 
    <div id="collapseTwo" class="collapse" role="tabpanel" aria-labelledby="headingTwo" data-parent="#accordion"> 
 
     <div class="card-body"> 
 
     Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS. 
 
     </div> 
 
    </div> 
 
    </div> 
 
    <div class="card"> 
 
    <div class="card-header" role="tab" id="headingThree"> 
 
     <h5 class="mb-0"> 
 
     <a class="collapsed" data-toggle="collapse" href="#collapseThree" aria-expanded="false" aria-controls="collapseThree"> 
 
      Collapsible Group Item #3 
 
     </a> 
 
     </h5> 
 
    </div> 
 
    <div id="collapseThree" class="collapse" role="tabpanel" aria-labelledby="headingThree" data-parent="#accordion"> 
 
     <div class="card-body"> 
 
     Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS. 
 
     </div> 
 
    </div> 
 
    </div> 
 
</div>

codepen demo link

注意です：あなたのデモのリンクでは、彼らは、ブートストラップV3を使用していました。

Answer 2

ここに私はgot this workingとBootstrap4-CSS-fontAwesome & JS/JQueryがありません。

<a class="accordion-toggle collapsed" data-toggle="collapse" href="#anyId"> 
    click 
</a> 

<div id="anyId" class="collapse"> 
    Hi 
</div> 

<!-- CDNs for font-awesome, bootstrap, JQuery --> 
<link href="//netdna.bootstrapcdn.com/font-awesome/3.2.1/css/font-awesome.css" rel="stylesheet"> 

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/css/bootstrap.min.css" rel="stylesheet"> 

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> 

<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/js/bootstrap.min.js"></script> 

の.css

.accordion-toggle:after { 
    font-family: 'FontAwesome';/* essential to enable caret symbol*/ 
    content: "\f0d7";/* adjust as needed, taken from font-awesome.css */ 
    color: grey; 
} 
.accordion-toggle.collapsed:after { 
    /* symbol for "collapsed" panels */ 
    content: "\f0da"; /* adjust as needed, taken from font-awesome.css */ 
} 

ありがとう@Satheeshクマール