<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 ----------> <script src="https://code.jquery.com/jquery-3.5.1.min.js" integrity="sha256-9/aliU8dGd2tb6OSsuzixeV4y/faTqgFtohetphbbj0=" crossorigin="anonymous"></script> <ul style="list-style: none;"> <li style="padding: 8px 5px 5px 10px; color: white; border: 2px groove; background: #1a3669;">> Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. </li> <li style="padding: 8px 5px 5px 10px; color: white; border: 2px groove; background: #1a3669;" id="parentli" > > Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. <i onclick="selfaccordian(this);" style="float:right;position:absolute; right:30px;font-size:19px;font-weight:600;cursor:pointer;">-</i> <ul style="list-style: none;" id="nestedul"> <li style="padding: 8px 5px 5px 10px; color: black; border: 2px groove;background: white;">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor.</li> <li style="padding: 8px 5px 5px 10px; color: black; border: 2px groove; background: white;">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor . </li> <li style="padding: 8px 5px 5px 10px; color: black; border: 2px groove; background: white;">Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec</li><a href="https://drillthedeal.com" target="blank"> offers </a> </ul> </li> </ul>

function selfaccordian(obj) { if ($('#nestedul').is(":visible")) { $(obj).html('+'); $('#nestedul').slideUp(800); } else { $(obj).html('-'); $('#nestedul').slideDown(800); } }