loop function document.getElementById()

Question

So i'm using three unique IDs "titleselected0", "titleselected1", "titleselected2". Each with an onclick function which runs a function "myFunction0", "myFunction1", "myFunction2". I'm using this to change the styling. My question is whether I can use a loop so i only need to use one function instead of three?

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/js/bootstrap.min.js"></script> <style type="text/css">.collapse { display: none; } .collapse.in { display: block; } .title { background-color: #005FAA; border: none; border-radius: 0; padding: 30px; } .title:hover { background-color: #009cde; border: none; border-radius: 0; padding: 30px; } .container{ margin-top:25px; float:left; width: 32%; margin-right: 2%; } .container:last-child{ margin-right:0px; width:32%;} @media only screen and (max-width: 800px) { .container{ margin-top:15px; width: 100%; } .container:last-child{ margin-top:15px; width: 100%; } } .titleselected{ background-color: #009cde; border:none; border-radius:0; padding: 30px; } </style> <div> <div class="container"> <div class="title" data-toggle="collapse" href="#collapse" id="titleselected0" onclick="myFunction0()"> <h4><a href="#collapse" style="color:white; text-decoration:none; text-align:center;">System Information</a></h4> </div> <div class="collapse" id="collapse" style="background-color:#005FAA;transition: width 200ms ease-out, height 200ms ease-out;"> <div style="color:white; padding: 30px;border:none;"> <p><strong>TestingTestingTestingTestingTestingTestingTesting</strong></p> <ul> <li>TestingTestingTestingTestingTestingTestingTesting</li> <li>TestingTestingTestingTestingTestingTestingTesting</li> <li>TestingTestingTestingTestingTestingTestingTesting</li> </ul> <p><strong>TestingTestingTestingTestingTestingTestingTesting: </strong></p> <ul> <li>TestingTestingTestingTestingTestingTestingTesting</li> <li>TestingTestingTestingTestingTestingTestingTesting</li> <li>TestingTestingTestingTestingTestingTestingTesting</li> <li>TestingTestingTestingTestingTestingTestingTesting</li> </ul> </div> </div> </div> <div class="container"> <div class="title" data-toggle="collapse" href="#collapse2" id="titleselected1" onclick="myFunction1()"> <h4><a href="#collapse2" style="color:white;text-decoration:none;text-align:center;">Product Specification</a></h4> </div> <div class="collapse" id="collapse2" style="background-color:#005FAA;transition: width 200ms ease-out, height 200ms ease-out;"> <div style="color:white; padding: 30px;border:none;"> <p><strong>TestingTestingTestingTestingTestingTestingTesting:</strong></p> <ul> <li>TestingTestingTestingTestingTestingTestingTesting</li> <li>TestingTestingTestingTestingTestingTestingTesting</li> <li>TestingTestingTestingTestingTestingTestingTesting</li> <li>TestingTestingTestingTestingTestingTestingTesting</li> <li>TestingTestingTestingTestingTestingTestingTesting</li> <li>TestingTestingTestingTestingTestingTestingTesting</li> </ul> </div> </div> </div> <div class="container"> <div class="title" data-toggle="collapse" href="#collapse3" id="titleselected2" onclick="myFunction2()"> <h4><a href="#collapse3" style="color:white;text-decoration:none;text-align:center;">Case Study</a></h4> </div> <div class="collapse" id="collapse3" style="background-color:#005FAA;transition: width 200ms ease-out, height 200ms ease-out;"> <div style="color:white; padding: 30px;border:none;"> <p><strong>TestingTestingTestingTestingTestingTestingTesting: </strong></p> <ul> <li>TestingTestingTestingTestingTestingTestingTesting</li> <li>TestingTestingTestingTestingTestingTestingTesting <a href="http://portfolio.cpl.co.uk/CIBSE/201904/40/">appeared in the CIBSE Journal</a></li> </ul> </div> </div> </div> </div> <script> function myFunction0() { var element = document.getElementById("titleselected0"); element.classList.toggle("titleselected"); } function myFunction1() { var element = document.getElementById("titleselected1"); element.classList.toggle("titleselected"); } function myFunction2() { var element = document.getElementById("titleselected2"); element.classList.toggle("titleselected"); } </script>

Answer 1

Those elements already have a class of title , so you can just loop over all .title elements and attach the listener:

document.querySelectorAll('.title').forEach((element) => {
  element.addEventListener('click', () => {
    element.classList.toggle("titleselected");
  });
});

(feel free to delete all of their id s and the inline attribute onclick handlers - best to attach listeners with Javascript, not HTML)

You could also use event delegation on the container which has all .title s:

<div class="container-for-all">
   <div class="container">
     ...
   </div>
   <div class="container">
     ...
   </div>
   <!-- etc -->

and

document.querySelector('.container-for-all').addEventListener('click', ({ target }) => {
  const closestTitle = target.closest('.title');
  if (!closestTitle) {
    return;
  }
  closestTitle.classList.toggle('titleselected');
});