How should I modify this code so it works with severel id's?

Question

    <script>
        var toggleVisibility = function(element) {
        if(element.style.display=='block'){element.style.display='none';}
        else {element.style.display='block';}
        };
    </script>

I got this code from another site and in my div, which should change from display:none to display:block when something is clicked, doesnt work with severel div id's from css :/

I got this in my div which should be clicked to make others divs visible:

    <div id="profile_button_box" onclick="toggleVisibility(document.getElementById('testt'))">

I read that this only can have one ID but how should I modify the code to be able to handle severel divs with one click?

Answer 1

name a class and try like this..

<div id="profile_button_box" class="profileButton">

In JavaScript

window.onload = function() {
    var buttons = document.getElementsByClassName('profileButton');
    for(var i = 0; i < buttons.length; i++) {
        var button = buttons[i];
        button.onclick = function(element) {
            if(element.style.display=='block'){
                  element.style.display='none';
            } else {
                  element.style.display='block';
            }
        }
    }
}

OR in jQuery

 $(document).on('click', '.profileButton', function(element){
          if(element.style.display=='block'){
                  element.style.display='none';
          } else {
                  element.style.display='block';
          }
 });

for toggle operation you can simply write and use class like..

<style>
    .hide { display: none; }
</style>
<script>
    $(document).on('click', '.profileButton', function(element){
            // here we used classToggle property to hide/display the element
            $(element).toggleClass('hide');
    });
</script>

Answer 2

If you need to toggle many divs, you'll need to assign them all the same class and use document.querySelectorAll('.myClass'). Keep in mind though, this will return a NodeList which you'll need to iterate over to apply the style to each div.

Answer 3

I would change your javascript a little to make it more accommodating for multiuse, also as many people have said it's alway's best to use classes and IDs are meant to be unique

toggleVisibility = function(a) {
  var selector = document.querySelectorAll(a);
  for (let i = 0; i < selector.length; i++) {
    if (selector[i].style.display == 'block') {
      selector[i].style.display = 'none';
    } else {
      selector[i].style.display = 'block';
    }
  }
};

.example {
  display: flex;
}
#testt {
  background: tomato;
  width: 100px;
  height: 100px;
  margin: 10px;
}
.testt {
  background: darkorange;
  width: 100px;
  height: 100px;
  margin: 10px;
}
pre {
  background: green;
  width: 100px;
  height: 100px;
  margin: 10px;
}

<div class="example">
  <div id="testt"></div>
  <div id="testt"></div>
  <div id="testt"></div>
  <div id="testt"></div>
  <div id="testt"></div>
  <div id="testt"></div>
</div>

<div class="example">
  <div class="testt"></div>
  <div class="testt"></div>
  <div class="testt"></div>
  <div class="testt"></div>
  <div class="testt"></div>
  <div class="testt"></div>
</div>

<div class="example">
  <pre></pre>
  <pre></pre>
  <pre></pre>
  <pre></pre>
  <pre></pre>
  <pre></pre>
</div>

<div id="profile_button_box" onclick="toggleVisibility('#testt')">test IDs</div>
<div id="profile_button_box" onclick="toggleVisibility('.testt')">test classes</div>
<div id="profile_button_box" onclick="toggleVisibility('pre')">test tags</div>

You'll notice for ID's I start the ID name with # for classes I start with . and for tags I just write the tag name (this is the same as CSS).

Hope this helps.

EDIT:

Of course, a much better way to do this (much less code) would be to toggle a hidden class. Like so.

toggleVisibility = function(a) {
  var selector = document.querySelectorAll(a);
  for (let i = 0; i < selector.length; i++) {
    selector[i].classList.toggle("hidden");
  }
};

.example {
  display: flex;
}
.hidden {
  display: none;
}
#testt {
  background: tomato;
  width: 100px;
  height: 100px;
  margin: 10px;
}

<div class="example">
  <div id="testt"></div>
  <div id="testt"></div>
  <div id="testt"></div>
  <div id="testt"></div>
  <div id="testt"></div>
  <div id="testt"></div>
</div>
<div id="profile_button_box" onclick="toggleVisibility('#testt')">Button</div>

You use it the same as the code above, but it uses a lot less JS.

Answer 4

Orginal post

Use a class when you want to consistently style multiple elements throughout the page/site. Classes are useful when you have, or possibly will have in the future, more than one element that shares the same style. An example may be a div of "comments" or a certain list style to use for related links.

Additionally, a given element can have more than one class associated with it, while an element can only have one id. For example, you can give a div two classes whose styles will both take effect.

Furthermore, note that classes are often used to define behavioral styles in addition to visual ones. For example, the jQuery form validator plugin heavily uses classes to define the validation behavior of elements (e.g. required or not, or defining the type of input format)

Examples of class names are: tag, comment, toolbar-button, warning-message, or email.

Use the ID when you have a single element on the page that will take the style. Remember that IDs must be unique. In your case this may be the correct option, as there presumably will only be one "main" div on the page.

Examples of ids are: main-content, header, footer, or left-sidebar. A good way to remember this is a class is a type of item and the id is the unique name of an item on the page.