Accordion Plus Minus

HTML

<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css">
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
<link rel="stylesheet" href="http://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.0.3/css/bootstrap.css">
<script src="http://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.0.3/js/bootstrap.js"></script>
<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...

CSS

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;}