Javascript hide/show div when the next button is clicked

Question

I have a page with many images acting as button that when clicked on, reveal a seperate set of images. However, I only want one set to be shown at a time -- so that when you click on the next button, it hides the set currently being shown. I'm sure this isn't too tricky, but I'm such a beginner! Any help would be greatly appreciated. Here is a snippet of my code:

HTML:

<button onclick="contentcarFunction()">
            <div class="item" id="carprint">
                <img class="thermal-img" src="img/carprint-400px.png" alt="">
            </div> 
        </button>

        <div class="content-box" id="carprint-1">
            <img class="gallery-img" id="content" src="img/CARPRINT/carprint1.jpeg" alt="">
            <img class="gallery-img" id="content" src="img/CARPRINT/carprint2.jpeg" alt="">
        </div>

        <button onclick="contentyanaFunction()">
            <div class="item" id="yana">
                <img class="thermal-img" src="img/yana-400px.png" alt="">
            </div>
        </button>

        <div class="content-box" id="yana-1">
            <img class="gallery-img" id="content" src="img/DVD/DVDV.jpg" alt="">
            <img class="gallery-img" id="content" src="img/DVD/Screen Shot 2020-04-15 at 14.02.47.png" alt="">
        </div>

        <button onclick="contenttsarFunction()">
            <div class="item" id="tsar">
                <img class="thermal-img" src="img/tsar1-400px.png" alt="">
            </div>
        </button>

        <div class="content-box" id="tsar-1">
            <iframe id="clip" width="560" height="315" src="https://www.youtube.com/embed/wQgjq-Hiz4Y"></iframe>
            <img class="gallery-img" id="content" src="img/Tsar/Excursion.gif" alt="">
            <img class="gallery-img" id="content" src="img/Tsar/Lecture.gif" alt="">
        </div>

JavaScript:

function contentcarFunction() {
  var x = document.getElementById("carprint-1");
    if (x.style.display === "none") {
      x.style.display = "block";
    } else {
      x.style.display = "none";
  }
}

function contentyanaFunction() {
  var x = document.getElementById("yana-1");
    if (x.style.display === "none") {
      x.style.display = "block";
    } else {
      x.style.display = "none";
  }
}

function contenttsarFunction() {
  var x = document.getElementById("tsar-1");
    if (x.style.display === "none") {
      x.style.display = "block";
    } else {
      x.style.display = "none";
  }
}

Answer 1

You can set display none of the other btn content when one btn is click

const carPrint = document.getElementById("carprint-1");
const yana = document.getElementById("yana-1");
const tsar = document.getElementById("tsar-1");

function contentcarFunction() {
  if (carPrint.style.display === "none") {
    carPrint.style.display = "block";
    yana.style.display = "none";
    tsar.style.display = "none";
  } else {
    carPrint.style.display = "none";
  }
}

function contentyanaFunction() {
  if (yana.style.display === "none") {
    yana.style.display = "block";
    tsar.style.display = "none";
    carPrint.style.display = "none";
  } else {
    yana.style.display = "none";
  }
}

function contenttsarFunction() {
  if (tsar.style.display === "none") {
    tsar.style.display = "block";
    yana.style.display = "none";
    carPrint.style.display = "none";
  } else {
    tsar.style.display = "none";
  }
}

#carprint-1,
#yana-1,
#tsar-1 {
  display: none;
}

<button onclick="contentcarFunction()">
    <div class="item" id="carprint">
        Car Print
    </div>
</button>

<div class="content-box" id="carprint-1">
  Car Print Content
</div>

<button onclick="contentyanaFunction()">
    <div class="item" id="yana">
        Yana
    </div>
</button>

<div class="content-box" id="yana-1">
  Yana Content
</div>

<button onclick="contenttsarFunction()">
    <div class="item" id="tsar">
        Tsar
    </div>
</button>

<div class="content-box" id="tsar-1">
  Tsar Content

</div>