<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="row"> <div class="col-md-4 col-sm-12 mb30"> <div class="service-box4 text-center"> <h4>Customer Engagement </h4> <div class="hidden"> <div class="details"> <h5>Customer Engagement</h5> <ul class="list-unstyled"> <li><i class="bi bi-chevron-right"></i> <a href="https://firstvoiceit.com/customer-service">Customer Service </a></li> <li><i class="bi bi-chevron-right"></i> <a href="https://firstvoiceit.com/technical-support">Technical Support </a></li> <li><i class="bi bi-chevron-right"></i> <a href="https://firstvoiceit.com/live-chat">Live Chat </a></li> <li><i class="bi bi-chevron-right"></i> <a href="https://firstvoiceit.com/social-media">Social Media</a></li> <li><i class="bi bi-chevron-right"></i> <a href="https://firstvoiceit.com/email">Email </a></li> </ul> </div> </div> </div> </div> <div class="col-md-4 col-sm-12 mb30"> <div class="service-box4 text-center"> <h4>Data Marketing </h4> <div class="hidden"> <div class="details"> <h5>Data Marketing</h5> <ul class="list-unstyled"> <li><i class="bi bi-chevron-right"></i> <a href="https://firstvoiceit.com/lead-generation">Lead Generation </a></li> <li><i class="bi bi-chevron-right"></i> <a href="https://firstvoiceit.com/data-validation">Data Validation </a></li> </ul> </div> </div> </div> </div> <div class="col-md-4 col-sm-12 mb30"> <div class="service-box4 text-center"> <h4>Capabilities</h4> <div class="hidden"> <div class="details"> <h5>Capabilities</h5> <ul class="list-unstyled"> <li><i class="bi bi-chevron-right"></i> <a href="https://firstvoiceit.com/quality-assurance">Quality Assurance </a></li> <li><i class="bi bi-chevron-right"></i> <a href="https://firstvoiceit.com/kpo-services">KPO Services</a></li> <li><i class="bi bi-chevron-right"></i> <a href="https://firstvoiceit.com/work-from-home">Work from Home </a></li> </ul> </div> </div> </div> </div> </div> </div> <!-- Modal --> <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel"> <div class="modal-dialog" role="document"> <div class="modal-content"> <div class="modal-body"> <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button> <div id="alldetails"></div> </div> </div> </div> </div> <!--/ Modal -->

.service-box4{ background: #fff; border-radius: 6px; box-shadow: rgb(0 0 0 / 25%) 0px 25px 50px -12px; padding: 15px 25px; position: relative; min-height: 140px; text-align:center; align-items: center; display: grid; cursor:pointer; } .hidden{ display:none; } .modal-body { padding: 25px; } .modal .close { color: #ecaa2b; opacity: 1; font-weight: 100; border: 1px solid #ecaa2b; border-radius: 50%; padding: 2px 6px; position: absolute; right: 5px; top: 5px; } .modal .close span { position: relative; top: -2px; } .modal .modal-dialog { margin: 40px 0px !important; max-width: 600px; width: 90%; position: absolute; top: 50%; left: 50%; -webkit-transform: translate(-50%, -50%) !important; transform: translate(-50%, -50%) !important; }

$('.service-box4').click(function(){ event.preventDefault(); var allDetails = $(this).find('.details').html(); console.log(allDetails); $('#alldetails').html(allDetails); $('#myModal').modal('show'); //myModal.play(); });