Javascript to Hide Multiple Div

// helperslet isHidden = (el) => el.style.display == "none" || el.classList.contains('hidden'),    isVisible = (el) => !isHidden(el),    show = (el) => el.style.display = "block";
// elementslet x = document.getElementById("div-x"),    y = document.getElementById("div-y"),    z = document.getElementById("div-z");
// click handlerlet handleClick = () => {
  if (isHidden(x))    show(x);
  else if (isHidden(y) && isVisible(x))    show(y);
  else if (isHidden(z) && isVisible(y) && isVisible(x))    show(z);
  else console.log("It worked!");  }
document.getElementById('btn').addEventListener('click', handleClick);

<div id="div-x" style="display:none">X</div><div id="div-y" style="display:none">Y</div><div id="div-z" style="display:none">Z</div>
<button id="btn">Click me!</button>

Show/Hide multiple Divs with same class name (javascript)

EDIT

@cirix has brought to my attention that my original code breaks because of the use of nextElementSibling without the necessary precautions to terminate the sibling chain. As it was before the edit if the last div was clicked it nextElementSibling would report a null since the last element would never have a next sibling (that's what makes last ...last).

There are 2 changes:

1. Added an extra condition to ensure that the only event.targets dealt with are <a>nchors, thereby fixing the issue.
2. Removed classList.add/remove and replaced them with classList.toggle(), that's an improvement, not a fix.

Use event delegation by wrapping all of your elements in one element. Then register the click event on it. With a little more setup you'll be able to control as many links as you want with just one eventListener. Details commented in Snippet.

SNIPPET

// Reference the parent elementvar main = document.getElementById('main');
/* Register main to the click event || when clicked ANYWHERE within main || toggle() is called*/main.addEventListener('click', toggle, false);
function toggle(e) {  /* Determine if the current element in the  || event chain is the anchor that was   || clicked.  */  if (e.target !== e.currentTarget && e.target.nodeName === "A") {    /* tgt is the clicked link    || txt is the div that follows tgt    */    var tgt = e.target;    var txt = tgt.nextElementSibling;    // Toggle classes .on and .off    txt.classList.toggle('on');    txt.classList.toggle('off');  }
}

.off {  display: none;}
.on {  display: inline-block;}

<section id='main'>  <a class='toggleText' href="#/">Show1</a>  <div class='displayText off'>    Text1  </div>  <a class='toggleText' href="#/">Show2</a>  <div class='displayText off'>    Text2  </div>  <a class='toggleText' href="#/">Show3</a>  <div class='displayText off'>    Text3  </div>  <a class='toggleText' href="#/">Show4</a>  <div class='displayText off'>    Text4  </div></section>

$(".carTitle").on('click', function(e) {  var carDetailsDiv = $(event.currentTarget).next();  if ($(carDetailsDiv).hasClass('open')) {    $(carDetailsDiv).removeClass('open');  } else {    $(carDetailsDiv).addClass('open');  }
  event.preventDefault();  return false;});

.carDetails {  display: none;}
.carDetails.open {  display: block;}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script><div id="carItem01_container">  <div id="carToyota" class="carTitle">    <div class="carName">Toyote    </div>  </div>  <div id="carToyota_show" class="carDetails open">    <div class="carDescription"> ...    </div>  </div></div>
<div id="carItem02_container">  <div id="carMazda" class="carTitle">    <div class="carName">Mazda    </div>  </div>  <div id="carMazda_show" class="carDetails">    <div class="carDescription"> ...    </div>  </div></div>
<div id="carItem03_container">  <div id="carVolvo" class="carTitle">    <div class="carName">Volvo    </div>  </div>  <div id="carVolvo_show" class="carDetails">    <div class="carDescription"> ...    </div>  </div></div>