The Web Design Group

... Making the Web accessible to all.

Welcome Guest ( Log In | Register )

 
Reply to this topicStart new topic
> How to conditionally hide a list
danmu
post 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.
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
CharlesEF
post 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?
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Christian J
post Apr 2 2020, 03:31 PM
Post #3


.
********

Group: WDG Moderators
Posts: 9,628
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?
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
danmu
post 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.
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Christian J
post Apr 3 2020, 09:06 AM
Post #5


.
********

Group: WDG Moderators
Posts: 9,628
Joined: 10-August 06
Member No.: 7



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.
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
danmu
post 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.
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Christian J
post Apr 3 2020, 04:37 PM
Post #7


.
********

Group: WDG Moderators
Posts: 9,628
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>
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
danmu
post Apr 6 2020, 01:00 PM
Post #8





Group: Members
Posts: 4
Joined: 2-April 20
Member No.: 27,263



Christian,
It works. Thanks.
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post

Reply to this topicStart new topic
2 User(s) are reading this topic (2 Guests and 0 Anonymous Users)
0 Members:

 



- Lo-Fi Version Time is now: 19th March 2024 - 04:21 AM