[SOLVED] how can I reset all elements to "display:none;"

rblampain · 11-28-2015, 12:53 AM

I need to reset the display of all elements (hundreds) to "display:none;" before executing the javascript routine below so that only one element is visible. How can I do that? Javascript? Or CSS? I only have basic knowledge of both. Any hint most welcome.

Code:

<script type="text/javascript">
function toggle_visibility(id) {
 var e = document.getElementById(id);
  if(e.style.display == 'none')
   e.style.display = 'block';
  else
   e.style.display = 'none';
}
</script>

note: '0001' in the lines below is an incremental value given by script and rising to '0342' for example, it can be changed to a strict number ("1" or "2" or "23" or "342") to suit a loop if necessary and this is an example of the elements:

Code:

Some explanations.<a href="#0001" onclick="toggle_visibility('0001');">toggle_this</a>
<span id="0001" style="display:none;">Some instructions: 
<textarea name="0001" rows="1" cols="80"></textarea>
<input type="submit" value="Report"><input type="submit" value="Submit">
</span>

Thank you for your help.

ondoho · 11-28-2015, 05:15 AM

Quote:

Originally Posted by rblampain

I need to reset the display of all elements (hundreds) to "display:none;"

for literally all elements, with css:

Code:

* { display: none !important; }

sundialsvcs · 11-29-2015, 09:33 AM

Also, every JavaScript library out there has the ability to "select" elements by some criteria, to loop through the selected list, and "hide()" them. It is usually best to leverage one of those libraries, and to use their higher-level routines (such as "hide") instead of direct CSS manipulations.

AnanthaP · 11-30-2015, 05:16 AM

Well javascript has a for loop and you may like to use it

for(i=1;i<343;i++) {
j=""+i ;
if (i<100) j="0"+j ;
if (i<10) j="00"+i ;
document.write("Some explanations.<a href=\"#"+ j + "\"
.....
and so on on
and ending with
.....
</span>
") ; Closing the document write
}

dugan · 11-30-2015, 02:24 PM

I'd do it with two classes: one to specify that an element is hideable and one to specify that it's hidden.

Code:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<style>
.hidden {
    display: None;
}
</style>
</head>
<body>
<p class="canhide">This is paragraph 1</p>
<p class="canhide">This is paragraph 2</p>
<button>Hide Text</button>
<script>
document.querySelector("button").addEventListener("click", function () {
    [].forEach(document.querySelectorAll("canhide"), function (e) {
        e.classList.add("hidden");
    });
});
</script>
</body>
</html>

In the markup I add the "canhide" class to each element that would need to be hidden. Then in the event handler I select each element with that class and add to it the "hidden" class. Elements with the "hidden" class have their display set to None.

It's very unlikely that you'll actually have to add the "canhide" class to "hundreds" of elements. You can add it to container elements such as divs.

rblampain · 12-05-2015, 07:59 AM

This modification works in a test of 3 elements.
<script type="text/javascript">
function toggle_visibility(id) {

for(i=1;i<4;i++) {
elemnt = document.getElementById(i);
elemnt.style.display = "none";
}

var e = document.getElementById(id);
if(e.style.display == 'none')
e.style.display = 'block';
else
e.style.display = 'none';
}
</script>

dugan · 12-05-2015, 11:23 AM

If you're going to apply an "id" to more than one element, then make it a class and and not an id. Then get them all at once with querySelectorForAll or getElementsByClassName.

An id is supposed to be unique. An id isn't. That's why the DOM APIs to select ids only return one element. And also why it's getElementById and getElementsByClassName.