js toggle for multiple divs

Question

I have 3 div which are hidden by default. I want to create a toggle for these 3 but I don't want to create onclick for each div and add this to the js file:

function myFunction() {
    var x = document.getElementById("myDIV");
    if (x.style.display === "none") {
        x.style.display = "block";
    } else {
        x.style.display = "none";
    }
}

I tried creating this scenario with clicked_id but it failed. When I click on the third div, the second one views aswell.

var projectEen = document.getElementById("projectInhoud");
projectEen.style.display = "none";
var projectTwee = document.getElementById("projectInhoudTwee");
projectTwee.style.display = "none";
var projectDrie = document.getElementById("projectInhoudDrie");
projectDrie.style.display = "none";

function displayFunction(clicked_id) {
    if (clicked_id == 1) {
        projectEen.style.display = "block";
    } else {
        projectTwee.style.display = "block";
    }  if(clicked_id == 3) {
        projectDrie.style.display = "block";
    } else {
      projectTwee.style.display = "none";
    }
}

How can I use the first code but to display all 3 div without creating the function 3 times?

EDIT: My html

     <div id="1" onclick="displayFunction(this.id)" class="projectTitel">
        <h1>Project: a</h1>
     </div>
  <div id="projectInhoudEen" class="projectInhoud"> content </div>

     <div id="2" onclick="displayFunction(this.id)" class="projectTitel">
        <h1>Project: b</h1>
     </div>
  <div id="projectInhoudTwee" class="projectInhoud"> content </div>

     <div id="3" onclick="displayFunction(this.id)" class="projectTitel">
        <h1>Project: c</h1>
     </div>
  <div id="projectInhoudDrie" class="projectInhoud"> content </div>

Answer 1

By combining document.getElementsByClassName and EventTarget.addEventListener, you can attach the same event handler to your divs. Inside this handler, you can retrieve the element you clicked on with the event object, provided by the event listener.

EDIT : The HTML you provided makes things a little more complicated because the projectTitel and projectInhoud divs aren't related to each other, except by position. So, in order to display the right projectInhoud div, we need to find the next projectInhoud after the projectTitel that was clicked on.

• To make things better, I would suggest editing the HTML to make projectTitel and projectInhoud divs children of a same parent div.
• Meanwhile, I added a getClickedProjectIndex function returns the index of the clicked projectTitel div. And the click event uses this index to show the right projectInhoud.
• Then, you can use a simple toggle function that displays the div if it's not visible or hide it if it's visible.

var divs = document.getElementsByClassName("projectTitel");

[...divs].forEach(someDiv => someDiv.addEventListener("click", handler));

// by default, all projectInHound are hidden
hideElements("projectInhoud");


function handler(event) {
    // get the clicked project's index :
    var projectIndex = getClickedProjectIndex(event);

    // toggle the right projectInhoud div :
    toggleDiv(document.getElementsByClassName("projectInhoud")[projectIndex]);
}

// hide all elements that have the provided class name
function hideElements(className) {
    var elements = document.getElementsByClassName(className);

    [...elements].forEach(element => element.style.display = "none");
}

function getClickedProjectIndex(event) {
    var elements = document.getElementsByClassName("projectTitel");
    var projectIndex = 0;

    [...elements].forEach((element, index) => {
        if (element.id == event.currentTarget.id) {
            projectIndex = index;
        }
    });

    return projectIndex;
}

function toggleDiv(element) {

   if (element.style.display === 'none') {
      element.style.display = 'block';
   } else {
      element.style.display = 'none';
   }
}

<div id="1" class="projectTitel">
        <h1>Project: a</h1>
     </div>
  <div id="projectInhoudEen" class="projectInhoud" > content a</div>

     <div id="2" class="projectTitel">
        <h1>Project: b</h1>
     </div>
  <div id="projectInhoudTwee" class="projectInhoud"> content b</div>

     <div id="3" class="projectTitel">
        <h1>Project: c</h1>
     </div>
  <div id="projectInhoudDrie" class="projectInhoud"> content c</div>

Answer 2

I would try something like this in the HTML:

<div class=myDiv onclick=myFunction(this)></div>
<div class=myDiv onclick=myFunction(this)></div>
<div class=myDiv onclick=myFunction(this)></div>

And for your JavaScript:

function myFunction(element){

    if(element.style.display = "none"){
        element.style.display = "block";
    else{
        element.style.display = "none";
    }

}