Help - Search - Members - Calendar
Full Version: How to conditionally hide a list
HTMLHelp Forums > Programming > Client-side Scripting
danmu
I have an order list:
<ol>
<li>Instruction A</li>
<li>Instruction B</li>
<li>Instruction c</li>
</ol>

I would like to hide Instruction B base on the value of "variableA" (set in JavaScript). Example: If variableA = false, then hide Instruction B.
CharlesEF
Where is your code? What have you tried? What event will trigger the action? Example: When the page loads? OR on a button click?
Christian J
Also, should the list item be completely removed from the DOM tree, or may it be made visible again by other user actions?

Will the content of the list change in the future, or will it always be the second LI element that's affected?
danmu
It triggers when the page is loaded and always the second LI element. Example:
When the page is loaded, it checks the browser. If the browser is Chrome or Firefox, then hide second element.
Christian J
QUOTE(danmu @ Apr 3 2020, 02:36 PM) *

When the page is loaded, it checks the browser. If the browser is Chrome or Firefox, then hide second element.

Alas browser detection is often unreliable (for example, how about chromium-based browsers, like the latest Edge versions?).

It's probably more reliable to let the user choose browser manually.
danmu
I used browser detection as an example. It could be other situation that sets the boolean variable.
Christian J
Here's an example:

CODE
<script type="text/javascript">
window.addEventListener('load', function() // fires when page is loaded
{
    var variableA=false; // sets variableA to false

    if(variableA==false) // checks if variableA is false
    {
        var ol=document.getElementsByTagName('ol')[0]; // first OL element on the page
        ol.getElementsByTagName('li')[1].style.display='none'; // hides the second LI element inside the first OL element
    }
}, false);
</script>
danmu
Christian,
It works. Thanks.
This is a "lo-fi" version of our main content. To view the full version with more information, formatting and images, please click here.
Invision Power Board © 2001-2020 Invision Power Services, Inc.