Html Question posted in
Some basic documentation can be found here.

Html – Show/hide text using getElementsByClassName for all classes

I am trying to show/hide text with the same class. I tried the following code that hides only the first id getElementById, which makes me decide to remove all IDs and just keep the class.

The text/words to be hidden are in different positions in the page (so I can’t just add a whole div around it, as I want to keep other text visible all the time).

I want to use getElementsByClassName instead, but I can’t seem to get it working.

function showhide() {
   var div = document.getElementById("newpost");
   div.classList.toggle('hidden'); 
}
.hidden{
    display : none;
}
<button id="button" onclick="showhide()">Click Me</button>
<span id="newpost" class="hidden"><p>text 1</p></span>
<span id="newpost" class="hidden">text 2</span>
<span id="newpost" class="hidden"><p>text 3</p></span>
Tags:

3

Answers


  1. 0

    if you try to do this with getElementsByClassName the problem is if you access elements with classname and toogles the class first time it will remove that class and when you click again you are not supposed to access that class.
    the possible solution would be two create two class name .hidden and .visible and add respective class onclick event or else you can also do it by accessing span tag directly

    .hidden {
   display: none;
        }

<button id="button" onclick="showhide()">Click Me</button>

  <span class="hidden"><p>text 1</p></span>
  <span class="hidden">text 2</span>
  <span class="hidden"><p>text 3</p></span>

function showhide() {
   var spans = document.querySelectorAll("span");
   spans.forEach(function (span) {
   span.classList.toggle("hidden");
  });
 }
    Login or Signup to reply.
  2. 0

    You need two classes:

    • one to designate the elements that you want to toggle (hidable in the example below)
    • one to control whether an element is currently hidden (hidden in the example).
    function showhide() {
  for (var elem of document.getElementsByClassName("hidable"))
    elem.classList.toggle("hidden");
}
    .hidden {
  display: none;
}
    <button onclick="showhide()">Click Me</button>
<span class="hidable hidden"><p>text 1</p></span>
<span class="hidable">text 2</span>
<span class="hidable hidden"><p>text 3</p></span>
    Login or Signup to reply.
  3. 0

    I would assign to each element whose display needs to be toggled a class such as demo that can be styled any way you want (except hidden) or not styled at all. I would then alternate adding or removing a class hidden:

    function toggle() {
  const elements = document.getElementsByClassName('demo');
  for (let i = 0; i < elements.length; i++) {
    element = elements.item(i);
    element.classList.toggle('hidden');
  }
}
    .demo {
    color: blue;
}

.hidden {
    display: none;
}
    <!doctype html>
<html>
  <head>
    <title>Test</title>
  </head>
  <body>
     <p><input type="button" value="Toggle show/hide" onclick="toggle();"></p>
     <span class="demo">Line 1<br></span>
     <span class="demo">Line 2<br></span>
  </body>
</html>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search