CODEWITHSUNDEEP
javascript
James1
James1

Reputation: 283

side navigation bar javascript help!

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!

Upvotes: 0

Views: 202

Answers (1)

lincolnk
lincolnk

Reputation: 11238

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";
    }
}

Upvotes: 1

Related Questions