All geek questions in one place

Roll up / down in javascript

Please help me with this roll up / down menu.

I showed the video.

http://www.youtube.com/watch?v=Eegqh1w3eJQ

Here is the html code:

<!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>Mode 1</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="show('n1')" id="english">57.102 Introductory Spanish</a><br />
<div id="n1" style="display:none">
<a href="#" onclick="show('n2')" id="green">Section 1:Introduction to Spanish Culture</a><br />
<div id="n2" style="display:none">
<a href="#" id="dark_red">Topic 1:Getting started</a><br />
<a href="#" id="dark_red">Topic 2:Introduction to Grammar</a><br /><br /><br />

</div>

<a href="#" onclick="show('n3')" id="green">Section 2:Getting started with reading and  writing</a><br />
<div id="n3" style="display:none">
<a href="#" onclick="show('nn3')" id="dark_red">Topic 1:Reading Spanish</a><br />
<div id="nn3" style="display:none">
<a href="mode 1.html" onclick="show('nn4')" id="light_blue">Mode 1:Spanish Components</a>
<div id="nn4" style="display:none">
<a href="reading_spanish.html" id="red">Spanish Reading</a>
</div>
</div><br />
<a href="#" id="dark_red">Topic 2:Writing in Spanish</a><br />
</div>
</div><br />

<a href="#" onclick="show('m1')" id="english">Topic SuperMode</a><br />
<div id="m1" style="display:none">
<a href="#" id="green">Study Guide</a><br />
<a href="#" onclick="show('m2')" id="green">Key Words</a><br />
<div id="m2" style="display:none">
<a href="#" id="dark_red">Pragmatics</a><br />
<a href="#" id="dark_red">Manana</a><br />
<a href="#" id="dark_red">Tiempo</a><br />
<a href="#" id="dark_red">Cara</a><br />
<a href="#" id="dark_red">Triste</a><br />
</div>
<a href="#" id="green">Learning Support</a><br />
<a href="#" id="green">Help</a><br />
<a href="#" id="green">Chat</a><br />
<a href="#" id="green">Email</a><br />
<a href="#" id="green">Notes</a><br />
</div><br />

<a href="#" onclick="show('p1')" id="english">Pre-defined modes</a><br />
<div id="p1" style="display:none">
<a href="#" id="green">Culture aspects</a><br />
<a href="#" id="green">Reading practice</a><br />
<a href="#" id="green">Writing practice</a><br />
<a href="#" id="green">Listening and speaking</a><br />
</div>

</div>


<div id="slection">
57.102 Introductory Spanish > Section 1 > Topic 1 > Mode 1
</div>

<div id="content">
<p id="list-component">List of Available Components </p>
<!--<div id="check-box">
<input type="checkbox" value="checkbox1" />
<label id="label">Reading</label>
<label id="label2">15-10-2010</label>
<label id="label">10:52</label>
<label id="label2">Kemp</label><br />

<input type="checkbox" value="checkbox2" />
<label id="label">Listening</label>
<label id="label2">14-10-2010</label>
<label id="label">8:02</label>
<label id="label2">Kemp</label><br />

<input type="checkbox" value="checkbox3" />
<label id="label">Writing</label>
<label id="label2">10-10-2010</label>
<label id="label">7:35</label>
<label id="label2">Kemp</label><br />

<input type="checkbox" value="checkbox4" />
<label id="label">Grammar</label>
<label id="label2">01-10-2010</label>
<label id="label">4:20</label>
<label id="label2">Kemp</label><br />
</div>-->


<table id="tabl">
<tr>
<td><input type="checkbox" value="checkbox1" /></td>
<td>Reading</td>
<td>15-10-2010</td>
<td>10:52</td>
<td>Kemp</td>
</tr>

<tr>
<td><input type="checkbox" value="checkbox2" /></td>
<td>Listening</td>
<td>14-10-2010</td>
<td>08:02</td>
<td>Kemp</td>
</tr>

<tr>
<td><input type="checkbox" value="checkbox3" /></td>
<td>Writing</td>
<td>10-10-2010</td>
<td>07:35</td>
<td>Kemp</td>
</tr>

<tr>
<td><input type="checkbox" value="checkbox4" /></td>
<td>Grammar</td>
<td>01-10-2010</td>
<td>04:20</td>
<td>Kemp</td>
</tr>
</table><br />

<input type="button" name="edit_button" id="save_but" value="Edit" />
<input type="button" name="delete_button" id="cancel_but" value="Delete" />
<input type="button" name="Student Preview" id="cancel_but" value="preview" onclick="window.location.href='student_preview.html'" />
<input type="button" name="back" id="preview-but" value="Back" />


</div>


</div>

</body>
</html>

Here is javascript

function show(id)
{
    object=document.getElementById(id);
    if(object.style.display=="none")
    {
        object.style.display="";
        }
        else
        {
        object.style.display="none";
        }
    }

Here is CSS

@charset "utf-8";
/* CSS Document */
html,body{
    padding:0;
    margin:0;
    background-color:#E8E8E8;
}
.Body{
    background-color:#FFF;
    width:1050px;
    height:900px;
    margin:auto;
    padding:0;
    position:relative;
}
.header{
    background-color:#FFF;
    width:1048px;
    height:140px;
    float:right;
    border:1px #F00 dotted;
    position:relative;
}
.header #head{
    text-align:center;
    font-family:Verdana, Geneva, sans-serif;
    font-size:46px;
}
.header #select-system{
    position:absolute;
    left:20px;
    bottom:-18px;
    font-family:Verdana, Geneva, sans-serif;
    text-decoration:underline;
}
.side-nav{
    background-color:#FFF;
    width:250px;
    height:757px;
    position:absolute;
    left:auto;
    bottom:0px;
    border:1px dotted #F00;
}
.side-nav #english{
    text-decoration:none;
    font-size:18px;
    font-weight:bold;
    padding:5px;
    color:#06F;
}
.side-nav #blue{
    color:#03F;
    text-decoration:none;
    font-weight:bold;
    font-size:14px;
}
.side-nav #green{
    color:#6F0;
    text-decoration:none;
    font-size:14px;
    font-weight:bold;
    padding-left:15px;
}
.side-nav #dark_red{
    color:#900;
    text-decoration:none;
    font-size:14px;
    font-weight:bold;
    padding-left:30px;
}
.side-nav #light_blue{
    color:#0CF;
    text-decoration:none;
    font-size:14px;
    font-weight:bold;
    padding-left:45px;
}
.side-nav #red{
    color:#F00;
    text-decoration:none;
    font-size:14px;
    font-weight:bold;
    padding-left:60px;
}
.Body #content{
    position:absolute;
    left:260px;
    top:180px;
    width:780px;
    height:700px;
    border:1px solid #F00;
}
.Body #content1{
    position:absolute;
    left:260px;
    top:150px;
    width:780px;
    height:740px;
    border:1px solid #F00;
}
.Body #txt{
    margin-left:20px;
}
.Body #slection{
    position:absolute;
    left:260px;
    top:150px;
    font-family:Verdana, Geneva, sans-serif;
    font-size:16px;
    color:#F00;
    font-weight:bold;
}
.Body #boxes{
    border:2px solid #000;
    margin-left:10px;
    margin-top:10px;
    height:25px;
}
.Body #text{
    font-weight:bold;
    font-size:20px;
    margin-left:20px;
    margin-top:10px;
}
.Body #cont_box{
    width:730px;
    height:180px;
    border:2px solid #000;
    margin-left:20px;
    font-size:20px;
    color:#00F;
    padding:5px;
}
.Body #cont_box1{
    width:730px;
    height:280px;
    border:2px solid #F60;
    margin-left:13px;
    font-size:20px;
    color:#06F;
    padding:10px;
}
.Body #cont_box2{
    width:645px;
    height:350px;
    border:2px solid #F60;
    margin-left:60px;
    font-size:20px;
    color:#06F;
}
.Body #browse_box{
    border:2px solid #000;
    margin-left:150px;
    margin-bottom:10px;
    height:25px;
    width:400px;
}
.Body #button{
    width:65px;
    height:30px;
    font-weight:700;
    color:#03F;
    margin-left:10px;
}
.Body #button:hover{
    background-color:#09F;
}
.Body #button_more{
    width:65px;
    height:30px;
    font-weight:700;
    color:#03F;
    margin-left:567px;
}
.Body #save_but{
    width:65px;
    height:30px;
    font-weight:700;
    color:#03F;
    margin-left:150px;
}
.Body #cancel_but{
    width:65px;
    height:30px;
    font-weight:700;
    color:#03F;
    margin-left:20px;
}
.Body #preview-but{
    width:65px;
    height:30px;
    font-weight:700;
    color:#03F;
    margin-left:100px;
}
.Body #preview-but:hover{
    color:#009;
}
.Body #checkbox{
    margin-left:150px;
    height:20px;
}
.Body #dropdownbox{
    width:180px;
    height:30px;
    position:absolute;
    left:280px;
    top:10px;
}
.Body #b1{
    text-align:center;
    font-family:Arial, Helvetica, sans-serif;
    font-size:36px;
    color:#F00;
}
.Body #icons{
    width:130px;
    height:140px;
    margin-right:10px;
    margin-left:60px;
    margin-top:50px;
    float:left;
}
.Body #text_icons{
    width:190px;
    height:15px;
    float:left;
    font-size:14px;
    text-decoration:none;
    color:#06F;
    margin-left:20px;
    margin-right:5px;
}
.Body #extra-materials{
    font-size:18px;
    text-decoration:none;
    margin-left:60px;
    color:#06F;
}
.Body #extra-materials:hover{
    text-decoration:underline;
}
.Body #list-component{
    margin-left:40px;
    font-size:18px;
    font-weight:bold;
}
.Body #check-box{
    margin-left:150px;
}
.Body #label{
    margin-left:30px;
}
.Body #label2{
    margin-left:80px;
}
.Body #tabl{
    border:hidden;
    width:500px;
    height:10px;
    margin-left:150px;
    margin-top:50px;
}

Please, help!!!

Thanks in advance!

+3
source share
1 answer

It seems to me that your problem is that your Spanish component link sends you to another .html page. When a new page loads, the menu on the left side of the page also reloads to its original state (with everything hidden or "minimized," as you say). So, the two solutions that I see are as follows:

(1) Do not reload the page.

(2) ( 1.html), , , .

, AJAX 1.html . AJAX, w3schools.com .

, , . , , , , , , , AJAX.

+2

Source: https://habr.com/ru/post/1769903/

More articles:


All Articles