<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 ----------> <section id="our_services"> <div class="container"> <div class="row"> <div class="text-center w-100 mt-4"> <div class="read_more_work"> <div class="row justify-content-center mx-3 mor"> <div class="col-sm-12 col-md-6 col-lg-4 text-left more_services hindn" style="display: block;"> <ul class="links"> <li><a href="" title=""> <span class="icon"><i class="fa"><img src="media/images/original/two-way-sms.png" width="25px" alt="" title=""></i></span> <span class="text">Two Way SMS</span></a> </li> <li><a href="" title=""> <span class="icon"><i class="fa"><img src="media/images/original/SEO.png" width="25px" alt="" title=""></i></span> <span class="text">SEO</span></a> </li> </ul> </div> <div class="col-sm-12 col-md-6 col-lg-4 text-left more_services hindn" style="display: block;"> <ul class="links "> <li><a href="" title=""> <span class="icon"><i class="fa"><img src="media/images/original/SIM-based-bulk-sms.png" width="25px" alt="" title=""></i></span> <span class="text">SIM Based Bulk SMS</span></a> </li> <li><a href="" title=""> <span class="icon"><i class="fa"><img src="media/images/original/Election-Campaign.png" width="25px" alt="" title=""></i></span> <span class="text">Election Campaign</span></a> </li> <li><a href="" title=""> <span class="icon"><i class="fa"><img src="media/images/original/OTP.png" width="25px" alt="" title=""></i></span> <span class="text">OTP SMS</span></a> </li> </ul> </div> <div class="col-sm-12 col-md-6 col-lg-4 text-left more_services hindn" style="display: block;"> <ul class="links "> <li><a href="" title=""> <span class="icon"><i class="fa"><img src="media/images/original/Personalise.png" width="25px" alt="" title=""></i></span> <span class="text">Personalise Bulk SMS</span></a> </li> <li><a href="" title=""> <span class="icon"><i class="fa"><img src="media/images/original/bulk-sms-campaign.png" width="25px" alt="" title=""></i></span> <span class="text">Bulk SMS Campaign</span></a> </li> <li><a href="" title=""> <span class="icon"><i class="fa"><img src="media/images/original/social_networks.png" width="25px" alt="" title=""></i></span> <span class="text">SMO</span></a> </li> </ul> </div> </div> <div class="text-center"> <a href="#" class="btn read_more px-5 btn-warning">Read More <i class="fa fa-minus"></i></a></div> </div> </div> </div> </div> </section>

#our_services a.#our_services a.btn.read_more { margin: 15px; -webkit-transition: 0.5s; -o-transition: 0.5s; transition: 0.5s; display: inline-block; }

$("div.hindn").hide(); $(".read_more").click(function() { $(".read_more_work div.hindn").slideToggle(0500); $(".read_more > i").toggleClass("fa fa-plus"); $(".read_more > i").toggleClass("fa fa-minus"); });