Home/ Questions/Q 3235032
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-17T17:27:36+00:00

i’m struggling with display/hide text using javascript here. Here is what i wanted to

  • 0

i’m struggling with display/hide text using javascript here.
Here is what i wanted to achieve like the picture below:
alt text

and the below is my javascript i’ve got: 

function change_display(display)
{
    if(display.style.display=="none")
    {
        display.style.display="";
        }
        else
        {
        display.style.display="none";
        }
    }

Html

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<link href="Style_sheet.css" rel="stylesheet" type="text/css" />
<script src="Display text.js" type="text/javascript"></script>
</head>

<body onload="change_display(display)">
<div class="Body">
<div class="header">
<h1 id="head">Manage Components</h1>
<h3 id="select-system">Select System</h3>
</div>
<div class="side-nav">
<a href="javascript:change_display(display)">192.101 English A</a>
<div id="display"><a href="javascript:change_display(display)">&nbsp;&nbsp;Section 1:</a></div>
<div id="display">&nbsp;&nbsp;&nbsp;&nbsp;Topic 1:</div>
</div>

</div>

</body>
</html>

What i’ve got there doesn’t work. I don’t know how to get it to work

Although, i could display as text 1 but if i want to keep click and display downward, it won’t work.

Oh also, i want use css style with it as well, is there anyway i could do? cos i already use ID for javascript therefore, i can’t use ID again for css. I’ve tried to use “name” but doesn’t work at all.

Please help! Thanks in advance!

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    A couple of the obvious issues:

    you are calling change_display(display), but you have not created/filled a variable named display. you can’t have multiple elements with the same id. you can’t directly access an html element by id- you have to get a reference to it using the id.

    some minor things we’ll clean up right away:
    the call to change_display is not needed for body‘s load event. calling js from href is bad form.

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<link href="Style_sheet.css" rel="stylesheet" type="text/css" />
<script src="Display text.js" type="text/javascript"></script>
</head>

<body >
<div class="Body">
<div class="header">
<h1 id="head">Manage Components</h1>
<h3 id="select-system">Select System</h3>
</div>

<div class="side-nav">

    <a href="#" onclick="change_display('eng_a'); return false;">192.101 English A</a>

    <div id="eng_a" style="padding-left: 20px;">
       <a href="#" onclick="change_display('eng_a_sec_1'); return false;">Section 1:</a>

       <div id="eng_a_sec_1" style="padding-left: 20px;">
          Topic 1:
       </div>

    </div>

</div>

</div>

</body>
</html

    javascript:

    function change_display(id)
{
    // gets an html element by its unique id.
    var display = document.getElementById(id); 

    if(display.style.display=="none")
    {
        display.style.display="";
    }
    else
    {
        display.style.display="none";
    }
}
    • 0