[SOLVED] how can I reset all elements to "display:none;"
ProgrammingThis forum is for all programming questions.
The question does not have to be directly related to Linux and any language is fair game.
Notices
Welcome to LinuxQuestions.org, a friendly and active Linux Community.
You are currently viewing LQ as a guest. By joining our community you will have the ability to post topics, receive our newsletter, use the advanced search, subscribe to threads and access many other special features. Registration is quick, simple and absolutely free. Join our community today!
Note that registered members see fewer ads, and ContentLink is completely disabled once you log in.
If you have any problems with the registration process or your account login, please contact us. If you need to reset your password, click here.
Having a problem logging in? Please visit this page to clear all LQ-related cookies.
Get a virtual cloud desktop with the Linux distro that you want in less than five minutes with Shells! With over 10 pre-installed distros to choose from, the worry-free installation life is here! Whether you are a digital nomad or just looking for flexibility, Shells can put your Linux machine on the device that you want to use.
Exclusive for LQ members, get up to 45% off per month. Click here for more info.
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:
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.
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
}
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.
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.
LinuxQuestions.org is looking for people interested in writing
Editorials, Articles, Reviews, and more. If you'd like to contribute
content, let us know.