Lightbox Not Showing Navigation Buttons

Question

I have gotten Lightbox to work on my images, however the one issue I still have is that the navigation buttons are not displayed. They still work when you click the correct areas.

I have a suspicion it is due to my document structure i.e. my divs, however when I go into the CSS I have no clue on how to add the navigation buttons back.

document.querySelectorAll(".collapsible").forEach((coll) => {
  coll.addEventListener("click", () => {
    coll.classList.toggle("active");

    const content = coll.nextElementSibling;

    if (content.style.maxHeight) {
      content.style.maxHeight = null;
      // Add this:
      content.style.borderWidth = 0;
    } else {
      content.style.maxHeight = content.scrollHeight + "px";
      // And this:
      content.style.borderWidth = "1px";
    }
  });
});

.content {
  padding: 0 18px;
  max-height: 0;
  overflow: hidden;
  transition: border 0.2s ease-out, max-height 0.2s ease-out;
  background-color: white;
  border: 0px solid #D1D3D4;
  border-radius: 3px;
}

.collapsible {
  background-color: white;
  color: #021032;
  cursor: pointer;
  padding: 14px;
  width: 100%;
  border: solid 1px #D1D3D4;
  border-radius: 6px;
  text-align: left;
  outline: none;
  font-size: 15px;
  margin: 5px 0px;
}

<button type="button" class="collapsible"> Consult Logs <div class="icon"><div></button>

<div class="content">
  <div class="column">
    <p>Ensure the disc strength is not at “0”.</p>
  </div>
  <div class="column">
    <a href="../images/discStrength.png" data-lightbox="image-1" data-title="Ensure highlighted logs are not zero."> <img src="../images/discStrength.png" alt="Picture of logs"> </a>
  </div>
</div>

Answer 1

The answer was to actually go into the package they provided and copy the images in their image folder to yours. It was a silly mistake, and a simple solution, but I hope this helps somebody in the future.