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.
Full Version: How to conditionally hide a list
Where is your code? What have you tried? What event will trigger the action? Example: When the page loads? OR on a button click?
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?
Will the content of the list change in the future, or will it always be the second LI element that's affected?
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.
When the page is loaded, it checks the browser. If the browser is Chrome or Firefox, then hide second element.
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.
I used browser detection as an example. It could be other situation that sets the boolean variable.
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>
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>
Christian,
It works. Thanks.
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.