"Bootstrap 4 Accordion With Plus Minus ( Winson222 )"
Bootstrap 4.1.1 Snippet by Winson222

<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script> <script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <!------ Include the above in your HEAD tag ----------> <div class="container"> <div id="accordion"> <div class="card"> <div class="card-header"> <a class="card-link" data-toggle="collapse" href="#menuone" aria-expanded="true" aria-controls="menuone">Menu 1<span class="collapsed"><p><b>></b></p></span> <span class="expanded"><p><b><</b></p></span></a> </div> <div id="menuone" class="collapse show"> <div class="card-body"> Taj Mahal is built on the banks of river Yamuna and is surrounded by a beautiful garden. Mughal Emperor Shah Jahan constructed it for the commemoration of his wife Mumtaz Mahal. The construction was started in 1631 and in 1643, the construction of main building was completed. The construction of the whole complex was completed in 1653. Mumtaz Mahal is buried in Taj Mahal. </div> </div> </div> <br> <div class="card"> <div class="card-header"> <a class="card-link" data-toggle="collapse" href="#menutwo" aria-expanded="false" aria-controls="menutwo">Menu 2<span class="collapsed"><p><b>></b></p></span> <span class="expanded"><p><b><</b></p></span></a> </div> <div id="menutwo" class="collapse"> <div class="card-body"> Taj Mahal is built on the banks of river Yamuna and is surrounded by a beautiful garden. Mughal Emperor Shah Jahan constructed it for the commemoration of his wife Mumtaz Mahal. The construction was started in 1631 and in 1643, the construction of main building was completed. The construction of the whole complex was completed in 1653. Mumtaz Mahal is buried in Taj Mahal. </div> </div> </div> <br> <div class="card"> <div class="card-header"> <a class="card-link" data-toggle="collapse" href="#menu3" aria-expanded="false" aria-controls="menu3">Menu 1<span class="collapsed"><p><b>></b></p></span> <span class="expanded"><p><b><</b></p></span></a> </div> <div id="menu3" class="collapse"> <div class="card-body"> Taj Mahal is built on the banks of river Yamuna and is surrounded by a beautiful garden. Mughal Emperor Shah Jahan constructed it for the commemoration of his wife Mumtaz Mahal. The construction was started in 1631 and in 1643, the construction of main building was completed. The construction of the whole complex was completed in 1653. Mumtaz Mahal is buried in Taj Mahal. </div> </div> </div> </div> </div> <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.6/umd/popper.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/js/bootstrap.min.js"></script>
body{background-color:#fff;} .card-header, .card-link,.card-link:hover{background-color:#000;text-align:left;color:hotpink;} .card-body{padding:10px 10px;} .card{width:500px;} p{position:absolute;top:5px;right:20px;font-size:20px;color:white; -webkit-animation: minus 0.5s;} @keyframes minus { from { transform:rotate(0deg); } to { transform:rotate(360deg); } } [aria-expanded="false"] > .expanded, [aria-expanded="true"] > .collapsed {display: none;}
/* check this out=> https://bootsnipp.com/Winson222 */

Related: See More


Questions / Comments: