<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 class="col-xl-3"> <div class="widget-title"> <h4>categories</h4> </div> <div class="widget-content"> <ul id="accordion"> <li> <h4>Collection <span class="plusminus">+</span></h4> <ul> <li><a href="#">Golf</a></li> <li><a href="#">Cricket</a></li> <li><a href="#">Football</a></li> </ul> </li> <li> <h4>Technology <span class="plusminus">+</span></h4> <ul> <li><a href="#">Macbook</a></li> <li><a href="#">Ipad</a></li> <li><a href="#">Iphone</a></li> </ul> </li> <li> <h4>Furniture <span class="plusminus">+</span></h4> <ul> <li><a href="#">Chairs</a></li> <li><a href="#">Tables</a></li> <li><a href="#">Storage</a></li> <li><a href="#">Office</a></li> </ul> </li> </ul> </div> </div> </div>

.shop-widget { margin: 30px 0; } .widget-title { margin: 20px 0 35px; } .widget-title h4 { text-transform: uppercase; font-family: Poppins; font-size: 16px; color: #222222; letter-spacing: 1px; } .widget-content ul#accordion { margin: 0; padding: 0; list-style: none; } .widget-content ul#accordion li { display: block; margin: 0 0 25px; } .widget-content ul#accordion li span { position: absolute; right: 14px; } .widget-content ul#accordion li h4 { font-size: 13px; font-family: Poppins; color: #222222; text-transform: uppercase; font-weight: 500; letter-spacing: 0.5px; border-bottom: 1px solid #e9e9e9; padding: 0 0 10px; } .widget-content ul#accordion li h4:after { content: ""; border: 1.5px solid #000; left: 16px; position: absolute; width: 26px; top: 25px; } .widget-content ul#accordion li ul { padding: 0; margin: 0; display: none; } .widget-content ul#accordion li ul li { padding: 0 0 5px; margin:0; } .widget-content ul#accordion li ul li a { color: #888888; text-transform: none; font-size: 13px; font-family: Poppins; font-weight: 300; transition: 0.3s; } .widget-content ul#accordion li ul li a:hover { text-decoration: none; color: #000000; }

$(document).ready(function () { $("#accordion li > h4").click(function () { if ($(this).next().is(':visible')) { $(this).next().slideUp(300); $(this).children(".plusminus").text('+'); } else { $(this).next("#accordion ul").slideDown(300); $(this).children(".plusminus").text('-'); } }); });