How to make html code less repetitive using PHP?

I have a slider with various elements in it and when clicking on a button on a particular element will open a pop-up contain specific details to that selected element. Now my slider is becoming really long and I have been wondering if I can use either JavaScript or anything to make my code look nice and remove the repeating pattern of my code Below is my code:

<!-- 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>

In my code I have numerous slides and when clicking on the button Learn More should open another code which repeat itself as follows:

<!-- 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>

Is there a way for me to continue add other slides and modal in a way that would reduce the repeated HTML pattern in JavaScript or PHP while keeping the integrity of my code?

Answer

You can use a single modal and some javascript to populate that modal.

Below is just an example:

function showText(slideNo) {
  var title = document.getElementById("slide_title_" + slideNo).innerText;
  var text = document.getElementById("slide_text_" + slideNo).innerText;

  document.getElementById("modal_title").innerText = title;
  document.getElementById("modal_text").innerText = text;
}

function clearModal() {
  document.getElementById("modal_title").innerText = "";
  document.getElementById("modal_text").innerText = "";
}

<!-- 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" id="slide_title_1"> Slide 1 Title</h3>
      <p id="slide_text_1">
        Slide 1 Text
      </p>

      <button class="card_btn" onclick="showText(1)">
        <h4>Learn More</h4>
      </button>
    </div>
  </div>
</div>

<!-- Slides 2 -->
<div class="swiper-slide">
  <div class="card">
    <div class="card_image">
      <img src="image location">
    </div>

    <div class="card_info">
      <h3 class="card_title" id="slide_title_2"> Slide 2 Title</h3>
      <p id="slide_text_2">
        Slide 2 Text
      </p>

      <button class="card_btn" onclick="showText(2)">
        <h4>Learn More</h4>
      </button>
    </div>
  </div>
</div>

<!-- Modal -->
<div class="modal" id="modal">
  <div class="modal_header">
    <div class="modal_image">
      <img src="image location">
    </div>
  </div>
  <div class="modal_body">
    <h3 class="modal_title" id="modal_title">Title</h3>
    <div class="modal_para">
      <p id="modal_text">
      </p>
    </div>
    <button class="close-button" onclick="clearModal()">Close</button>
  </div>
</div>
<div id="overlay"></div>

Advertisement

Answer