Hello I have been working on a project lately where I have a slider with various elements in it such as images and a button learn more. When clicking on that button on a particular element it will open a pop-up contain specific details to that selected element namely will open a particular modal. Hence slide 1 button learn more should open modal1 but my code is becoming really long as I have numerous different slides with different modal and was wondering if I could either use JavaScript or anything to make my code look nice and remove the repeating pattern of slides and model div class while keeping the integrity of my code ? What I have tried: <pre> <!-- Slides 1 --> <div class="swiper-slide"> <div class="card"> <div class="card_image"> <img src="image location"> </div> <div class="card_info"> <h3 class="card_title">Title</h3> <p> Lorem, ipsum dolor sit amet consectetur adipisicing elit. Laboriosam porro ex vel minima, eaque culpa iusto veritatis ad tempore, unde animi dolorum optio modi nemo harum quia? Eaque, exercitationem et! </p> <button data-modal-target="#modal1" class="card_btn"> <h4>Learn More</h4> </button> </div> </div> </div>
<!-- Modal 1 --> <div class="modal" id="modal1"> <div class="modal_header"> <div class="modal_image"> <img src="image location"> </div> </div> <div class="modal_body"> <h3 class="modal_title">Title</h3> <div class="modal_para"> <p> Lorem ipsum dolor sit amet consectetur, adipisicing elit. Fuga assumenda nulla reprehenderit. Numquam culpa, quidem pariatur nam commodi ea necessitatibus incidunt sunt sapiente laboriosam asperiores assumenda repudiandae? Perspiciatis, sed! Veniam? </p> </div> <button data-close-button class="close-button">Close</button> </div> </div> <div id="overlay"></div>
var
This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)