I am just fooling around with some JavaScript, I am new to it so this is probably a simple solution. Basically what I want is for only 1 div
to be visible at a time so if a user clicks on one link to expose a div
the current div
that is exposed will collapse and the new one clicked will appear.
I have included the code below:
<html>
<head>
<title> test</title>
<LINK href="blah.css" rel="stylesheet" type="text/css">
<script language="javascript" type="text/javascript">
function toggle2(showHideDiv, switchTextDiv) {
var ele = document.getElementById(showHideDiv);
var text = document.getElementById(switchTextDiv);
if(ele.style.display == "block") {
ele.style.display = "none";
text.innerHTML = "restore";
}
else {
ele.style.display = "block";
text.innerHTML = "collapse";
}
}
function toggle22(showHideDiv2, switchTextDiv2) {
var ele = document.getElementById(showHideDiv2);
var text = document.getElementById(switchTextDiv2);
if(ele.style.display == "block") {
ele.style.display = "none";
text.innerHTML = "restore";
}
else {
ele.style.display = "block";
text.innerHTML = "collapse";
}
}
</script>
</head>
<body>
<div id="mainContent">
<div id="headerDiv">
<div id="titleText">Change Password - Click here ==></div><a id="myHeader" href="javascript:toggle2('myContent','myHeader');" >restore</a>
</div>
<div style="clear:both;"></div>
<div id="contentDiv">
<div id="myContent" style="display: none;">This is the content that is dynamically being collapsed.</div>
<!--DIV2 -->
<div id="headerDiv2">
<div id="titleText2">Change Username - Click here ==></div><a id="myHeader2" href="javascript:toggle22('myContent2','myHeader2');" >restore</a>
</div>
<div style="clear:both;"></div>
<div id="contentDiv2">
<div id="myContent2" style="display: none;">This is the content that is dynamically being collapsed.</div>
</div>
</div>
</body>
</html>
The CSS:
#headerDiv, #contentDiv {
float: left;
width: 510px;
}
#titleText {
float: left;
font-size: 1.1em;
font-weight: bold;
margin: 5px;
}
#myHeader {
font-size: 1.1em;
font-weight: bold;
margin: 5px;
}
#headerDiv {
background-color: #0037DB;
color: #9EB6FF;
}
#contentDiv {
background-color: #FFE694;
}
#myContent {
margin: 5px 10px;
}
#headerDiv a {
color: gold;
float: right;
margin: 10px 10px 5px 5px;
}
#headerDiv a:hover {
color: #FFFFFF;
}
#headerDiv2, #contentDiv2 {
float: left;
width: 510px;
}
#titleText2 {
float: left;
font-size: 1.1em;
font-weight: bold;
margin: 5px;
}
#myHeader2 {
font-size: 1.1em;
font-weight: bold;
margin: 5px;
}
#headerDiv2 {
background-color: #0037DB;
color: #9EB6FF;
}
#contentDiv2 {
background-color: #FFE694;
}
#myContent2 {
margin: 5px 10px;
}
#headerDiv2 a {
color: gold;
float: right;
margin: 10px 10px 5px 5px;
}
#headerDiv2 a:hover {
color: #FFFFFF;
}
style.display
only reflects the style that's been explicitly set on the element. Unless you specify it with style="display:block"
in HTML, the initial value of style.display
will be empty, even though the default value of that property, applied by CSS cascading, is indeed block
.
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.