J'ai créé un menu accordéon boostrap 4 avec les symboles + et -. Le symbole change car il est réduit et non réduit.
J'ajoute le symbole avec: après
Cependant, je voudrais le remplacer par un bouton plutôt que par un symbole '-, +'. Donc, il y aura 2 boutons pour moi et ce sera comme "Voir plus", "Voir moins" (Cela peut être le même bouton avec un texte et un arrière-plan différents) et changer en cliquant
Je ne pourrais pas ' t comprendre.
Mon code et démo: https: //www.codeply. com / go / sOps2WhtG5
.accordion .card-header:after {
font-family: 'FontAwesome';
content: "\f068";
float: right;
}
.accordion .card-header.collapsed:after {
/* symbol for "collapsed" panels */
content: "\f067";
}
Mon css
<div class="container">
<div id="accordion" class="accordion">
<div class="card mb-0">
<div class="card-header collapsed" data-toggle="collapse" href="#collapseOne">
<a class="card-title">
Item 1
</a>
</div>
<div id="collapseOne" class="card-body collapse" data-parent="#accordion" >
<p>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.
</p>
</div>
<div class="card-header collapsed" data-toggle="collapse" data-parent="#accordion" href="#collapseTwo">
<a class="card-title">
Item 2
</a>
</div>
<div id="collapseTwo" class="card-body collapse" data-parent="#accordion" >
<p>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.
</p>
</div>
<div class="card-header collapsed" data-toggle="collapse" data-parent="#accordion" href="#collapseThree">
<a class="card-title">
Item 3
</a>
</div>
<div id="collapseThree" class="collapse" 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. samus labore sustainable VHS.
</div>
</div>
</div>
</div>
3 Réponses :
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<div class="container">
<div id="accordion" class="accordion">
<div class="card mb-0">
<div class="card-header collapsed" data-toggle="collapse" href="#collapseOne">
<a class="card-title">
Item 1
</a>
</div>
<div id="collapseOne" class="card-body collapse" data-parent="#accordion" >
<p>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.
</p>
</div>
<div class="card-header collapsed" data-toggle="collapse" data-parent="#accordion" href="#collapseTwo">
<a class="card-title">
Item 2
</a>
</div>
<div id="collapseTwo" class="card-body collapse" data-parent="#accordion" >
<p>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.
</p>
</div>
<div class="card-header collapsed" data-toggle="collapse" data-parent="#accordion" href="#collapseThree">
<a class="card-title">
Item 3
</a>
</div>
<div id="collapseThree" class="collapse" 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. samus labore sustainable VHS.
</div>
</div>
</div>
</div>
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
.accordion .card-header:after {
content: "See less";
float: right;
}
.accordion .card-header.collapsed:after {
/* symbol for "collapsed" panels */
content: "See more";
}
cette solution unique pour cela. J'espère que cela vous aiderait
Mais j'aimerais le remplacer par un bouton plutôt que par du texte. Étant donné que je ne peux pas mettre le code HTML d'un bouton sur le contenu, j'ai supposé que je devais le mettre avec js ou quelque chose.
Dans votre exemple, vous utilisez div.card-header comme bascule de réduction; Avez-vous l'intention de limiter la gâchette à bascule au bouton uniquement? Si tel est le cas, pensez à changer votre a.card-title en div.card-title et ajoutez votre bouton à l'intérieur. Puis ajustez votre css sur le bouton .card-header: après . Veuillez noter que vous ne devez utiliser l'attribut href que sur une balise d'ancrage (vous l'avez sur votre div.card-header ) et pour le bouton élément que vous utiliseriez data-target . Vous pouvez consulter la documentation ici .
Si votre intention est de avoir un balisage plus complexe (pas seulement une étiquette de texte brut), vous aurez besoin d'une solution js. (Je peux également vous aider)
HTH
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<div class="container">
<div id="accordion" class="accordion">
<div class="card mb-0">
<div class="card-header">
<div class="card-title">
Item 1
<button type="button" class="btn btn-primary float-right collapsed" data-toggle="collapse" data-target="#collapseOne"></button>
</div>
</div>
<div id="collapseOne" class="card-body collapse" data-parent="#accordion" >
<p>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.
</p>
</div>
<div class="card-header">
<div class="card-title">
Item 2
<button type="button" class="btn btn-primary float-right collapsed" data-toggle="collapse" data-target="#collapseTwo"></button>
</div>
</div>
<div id="collapseTwo" class="card-body collapse" data-parent="#accordion" >
<p>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.
</p>
</div>
</div>
</div>
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
.accordion .card-header button:after {
font-family: 'FontAwesome';
content: "\f068";
}
.accordion .card-header button.collapsed:after {
content: "\f067";
}
Devrait probablement inclure l ' exemple de documentation
Cet exemple est plutôt bon mais ce n'est pas exactement un "accordéon", c'est comme une boîte à bascule. Tout ce que je demande, c'est d'avoir le bouton que vous avez montré dans votre démo, remplacé par +, - dans mon exemple. Je n'ai pas besoin d'utiliser du contenu pour afficher le «contenu», mais je ne pouvais pas le résoudre en le changeant simplement en div ou quelque chose.
@SNaRe J'ai mis à jour mon exemple. Faites-moi savoir si c'est ce que vous recherchez.
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<div class="container">
<div id="accordion" class="accordion">
<div class="card mb-0">
<div class="card-header">
<div class="card-title">
Item 1
<button type="button" class="btn btn-primary btn-sm float-right collapsed" data-toggle="collapse" data-target="#collapseOne"></button>
</div>
</div>
<div id="collapseOne" class="card-body collapse" data-parent="#accordion" >
<p>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.
</p>
</div>
<div class="card-header">
<div class="card-title">
Item 2
<button type="button" class="btn btn-primary btn-sm float-right collapsed" data-toggle="collapse" data-target="#collapseTwo"></button>
</div>
</div>
<div id="collapseTwo" class="card-body collapse" data-parent="#accordion" >
<p>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.
</p>
</div>
</div>
</div>
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
.accordion .card-header button:after {
content: "See less";
}
.accordion .card-header button.collapsed:after {
content: "See more";
}
J'ai adapté le code pour répondre à vos besoins, en tenant compte des réponses ci-dessus de @jcruz et @uday .
p>
Essayez de remplacer la propriété de contenu css par «+» ou «-»
@AswinKumar Mais j'aimerais le remplacer par un bouton plutôt que par du texte. Étant donné que je ne peux pas mettre le code HTML d'un bouton sur le contenu, j'ai supposé que je devais le mettre avec js ou quelque chose.
Vous ne savez toujours pas ce que vous attendez?