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


Tags: javascript,css,visibility,display

Problem :

    <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?



Solution :

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.


    CSS Howto..

    How to change scroll bar position with CSS?

    How to set z-index in css background

    How to “add details” to CSS (example Box shadow)

    How do I add a CSS3 transition to an image overlay?

    CSS Padding is working WITH :after selector - how to make it work on main element independently

    How can I center my

    when there is an next to it?

    How To Highlight Show Active Tab In A Navbar-Fixed-Top

    How can I nullify css property?

    how to position two image as a background image on div by css

    How do you create a link out of circular text with JavaScript and CSS?

    How to achieve a lightbox effect with css only? Example available

    How to apply bootstrap css to all buttons

    how to display euro symbol in css after and before pseudoelements

    How to force a responsive element to retain its aspect ratio [duplicate]

    How can I achieve the mouseover effect like on wikipedia?

    How to link my HTML file to my CSS file [closed]

    How to unbind element then allow that element to bind again

    How to make text input line up with button in IE7?

    How to combine several hover elements in JS/Jquery

    Fuelux, how to fix the width of a repeater column

    How to do CSS for a grid of images

    How to scale jumbotron bootstrap on larger monitors?

    How to make CSS border-image work

    How to ensure that columns are contained within a row

    CSS horizontal scroller, how to position “below” before “right”?

    How to center text in lists?

    How do i center the navigation menu and logo men using float?

    CSS: How to say .class:last-of-type [classes, not elements!] [duplicate]

    How can I set my image's hover when hovering my text?

    How to vertically align a DIV next to an image?