Bootstrap 4 changement de signe sur cliquant déroulante

En utilisant Bootstrap 4, je suis en train de créer une liste déroulante avec signe (Ex: vers la droite). En cliquant sur la liste déroulante caret direction de pointage doit être changé (Ex: vers le bas).

J'ai un façon de le faire

/*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";
}

Mais le hic, c'est, d'abord tous les signes pointant vers le bas qui devrait être le droit de

Il y a d'autres approches. Mais je ne veux pas utiliser JQuery, que ma demande est angulaire 4. Pour éviter d'JQuery/JS autant que possible.

Ce n'est pas un double question.

Merci beaucoup à l'avance...

Lorsque vous créez des accordéons, par défaut ajouter un collapsed classe à l'ancre avec la classe accordion-toggle. cela permettrait de faire le point à droite.
Arjun, j'ai essayé ta suggestion de trop.. travaillé 🙂 Merci à vous

OriginalL'auteur Vinni | 2017-09-19

Ici est de savoir comment je reçu ce travail avec Bootstrap4-CSS-fontAwesome & Pas de 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 */
}

Merci @Satheesh Kumar

OriginalL'auteur Vinni

Voici comment j'ai eu le mien de travail en utilisant uniquement CSS de bootstrap 4.2 et fontawesome. J'ai utilisé l'aria de l'étiquette et de l'ajout de transitions pour l'icône, à l'aide d'un span class pour l'icône

CSS:

#accordionExample .btn[aria-expanded=false] span:before {
  font-family: "Font Awesome 5 Free";
  font-weight: 900;
  content: "\f107";
  float: right;
 transition: all .5s;
}

#accordionExample .btn[aria-expanded=true] span:before {
  font-family: "Font Awesome 5 Free";
  font-weight: 900;
  content: "\f107";
  float: right;
  transition: all .5s;
  -webkit-transform: rotate(180deg);
    -moz-transform: rotate(180deg);
    transform: rotate(180deg);
}

HTML:

<div class="container my-5 mw-600">
<div class="accordion" id="accordionExample">
<div class="card">
<div class="card-header" id="headingOne">
<a class="btn btn-link d-flex" data-toggle="collapse" data-target="#collapseOne" aria-expanded="false">
Collapsible Group Item #1
<span class="ml-auto"></span></a>
</div>
<div id="collapseOne" class="collapse" aria-labelledby="headingOne" data-parent="#accordionExample">
<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" id="headingTwo">
<a class=" btn btn-link collapsed d-flex align-items-center" data-toggle="collapse" data-target="#collapseTwo" aria-expanded="false">
Collapsible Group Item #2
<span class="ml-auto"></span>
</a>
</div>
<div id="collapseTwo" class="collapse" aria-labelledby="headingTwo" data-parent="#accordionExample">
<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" id="headingThree">
<a class="btn btn-link collapsed d-flex" data-toggle="collapse" data-target="#collapseThree" aria-expanded="false">
Collapsible Group Item #3<span class="ml-auto"></span>
</a>
</div>
<div id="collapseThree" class="collapse" aria-labelledby="headingThree" data-parent="#accordionExample">
<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>
</div>

Démo: https://codepen.io/anon/pen/XoLgbY

OriginalL'auteur Robert Doyle

0

Si vous utilisez SCSS, il y a intégré mixin est surtout pour cela que situé à ~bootstrap/scss/mixins/_caret.scss.

caret-down, caret-up, caret-right, caret-left et caret($direction).

Donc, cela peut être aussi simple que:
```
.panel-heading .accordion-toggle {
@include caret(right);
&.collapsed {
@include caret(left);
}
}
```
ou, si votre code HTML contient aria-expanded attribut (ce qui est fortement conseillé)
```
.panel-heading .accordion-toggle {
&[aria-expanded="false"] {
@include caret(left);
}
&[aria-expanded="true"] {
@include caret(right);
}
}       
```
OriginalL'auteur lambidu

Vous devez vous connecter pour publier un commentaire.