Printable Version of Topic
Click here to view this topic in its original format
HTMLHelp Forums _ Client-side Scripting _ How to conditionally hide a list
Posted by: danmu Apr 2 2020, 11:50 AM
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.
Posted by: CharlesEF Apr 2 2020, 02:42 PM
Where is your code? What have you tried? What event will trigger the action? Example: When the page loads? OR on a button click?
Posted by: Christian J Apr 2 2020, 03:31 PM
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?
Posted by: danmu Apr 3 2020, 07:36 AM
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.
Posted by: Christian J Apr 3 2020, 09:06 AM
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.
Posted by: danmu Apr 3 2020, 01:51 PM
I used browser detection as an example. It could be other situation that sets the boolean variable.
Posted by: Christian J Apr 3 2020, 04:37 PM
Here's an example:
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>
Posted by: danmu Apr 6 2020, 01:00 PM
Christian,
It works. Thanks.
Powered by Invision Power Board (http://www.invisionboard.com)
© Invision Power Services (http://www.invisionpower.com)