How to conditionally hide a list |
How to conditionally hide a list |
danmu |
Apr 2 2020, 11:50 AM
Post
#1
|
Group: Members Posts: 4 Joined: 2-April 20 Member No.: 27,263 |
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 |
Apr 2 2020, 02:42 PM
Post
#2
|
Programming Fanatic Group: Members Posts: 1,981 Joined: 27-April 13 From: Edinburg, Texas Member No.: 19,088 |
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 |
Apr 2 2020, 03:31 PM
Post
#3
|
. Group: WDG Moderators Posts: 9,656 Joined: 10-August 06 Member No.: 7 |
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 |
Apr 3 2020, 07:36 AM
Post
#4
|
Group: Members Posts: 4 Joined: 2-April 20 Member No.: 27,263 |
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 |
Apr 3 2020, 09:06 AM
Post
#5
|
. Group: WDG Moderators Posts: 9,656 Joined: 10-August 06 Member No.: 7 |
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 |
Apr 3 2020, 01:51 PM
Post
#6
|
Group: Members Posts: 4 Joined: 2-April 20 Member No.: 27,263 |
I used browser detection as an example. It could be other situation that sets the boolean variable.
|
Christian J |
Apr 3 2020, 04:37 PM
Post
#7
|
. Group: WDG Moderators Posts: 9,656 Joined: 10-August 06 Member No.: 7 |
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 |
Apr 6 2020, 01:00 PM
Post
#8
|
Group: Members Posts: 4 Joined: 2-April 20 Member No.: 27,263 |
Christian,
It works. Thanks. |
Lo-Fi Version | Time is now: 26th April 2024 - 08:45 AM |