0
votes

Plus et moins icônes sur l'accordéon bootstrap

J'essaie de basculer entre Plus et moins icône pour l'accordéon bootstrap. Sous défaut, plus l'icône est affichée. Lorsque l'accordéon s'effondre, il montre les icônes moins et cache l'icône Plus. Je ne sais pas si ce que je dis est logique, mais c'est vraiment basique pour certains d'entre vous. Je suis juste un débutant.

J'ai essayé de le faire avec CSS avec: après et content "+" et content "-" Mais ce n'est pas ce que je veux. J'ai besoin d'utiliser des polices géniales. J'ai aussi essayé la manière JS. P>

<script>

$(document).ready(function(){

// Toggle plus minus icon on show hide of collapse element
        $(".collapse").on('show.bs.collapse', function(){
            $(this).prev(".card-header").find(".fa").removeClass("fa-plus").addClass("fa-minus");
        }).on('hide.bs.collapse', function(){
            $(this).prev(".card-header").find(".fa").removeClass("fa-minus").addClass("fa-plus");
        });
    });

</script>

<body>
<!-- Content Wrapper. Contains page content -->
<div class="content-wrapper">
  <!-- Main content -->
    <section class="content container-fluid">
        <legend><?php echo $header_title; ?></legend>
        <br>
            <div class="row">
                <div class="col-md-12 accordion-container">
                    <div class="accordion" id="accordionExample">
                        <div class="card">

                            <div class="card-header" id="headingTwo">
                                <h2 class="mb-0" style="margin: 10px !important">
                                    <button id="btnCollapse" class="btn btn-link collapsed" type="button" data-toggle="collapse" data-target="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo">
                                    <i class="fa fa-plus"></i>
                                    Card Info
                                    </button>
                                </h2>
                            </div>

                            <div id="collapseTwo" class="collapse" aria-labelledby="headingTwo" data-parent="#accordionExample">
                                <div class="card-body">
                                    <!-- SOME CONTENT -->
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
    </section>

javascript jquery

0 commentaires

3 Réponses :

0
votes

Vous pouvez utiliser une solution alternative comme suit: xxx

0 commentaires

1
votes

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>

<body>
  <!-- Content Wrapper. Contains page content -->
  <div class="content-wrapper">
    <!-- Main content -->
    <section class="content container-fluid">
      <legend>
        <?php echo $header_title; ?>
      </legend>
      <br>
      <div class="row">
        <div class="col-md-12 accordion-container">
          <div class="accordion" id="accordionExample">
            <div class="card">

              <div class="card-header" id="headingTwo">
                <h2 class="mb-0" style="margin: 10px !important">
                  <button id="btnCollapse" class="btn btn-link collapsed" type="button" data-toggle="collapse" data-target="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo">
                                    Card Info
                                    <i class="fa fa-plus"></i>
                                    </button>
                </h2>
              </div>

              <div id="collapseTwo" class="collapse" aria-labelledby="headingTwo" data-parent="#accordionExample">
                <div class="card-body">
                  <!-- SOME CONTENT -->
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </section>

0 commentaires

-1
votes

Alex, votre code fonctionne bien. S'il vous plaît vérifier ce violon.

[https://jsfiddle.net/boilerplate/bootstrap][1]

1 commentaires

Salut oui. Une erreur recrue, j'ai oublié de mettre le script jquery.