html - Javascript expandcollapse div loading as expanded rather than collapse

Hoping someone with a better knowledge of javascript can assist, I am wanting to use the following to create an expand/collapse div on our site, however this is loading automatically as expanded where it needs to be loaded initially as being collapsed.

Here's the code:

<script type="text/javascript">
 // toggle specific
 function toggleDiv(id1,id2) {
  var tag = document.getElementById(id1).style;
  var tagicon = document.getElementById(id2);

  if(tag.display == "none") {
   tag.display = "block";
   tagicon.innerHTML = "&nbsp;-&nbsp;";
  } else {
   tag.display = "none";
   tagicon.innerHTML = "&nbsp;+&nbsp;";
  }
 }

 function expandAll(cnt) {
  for(var x=1; x<=cnt; x++) {
    document.getElementById('content'+x).style.display="block";
    document.getElementById('icon'+x).innerHTML="&nbsp;-&nbsp;";  
  }
 }

 function collapseAll(cnt) {
  for(var x=1; x<=cnt; x++) {
    document.getElementById('content'+x).style.display="none";
    document.getElementById('icon'+x).innerHTML="&nbsp;+&nbsp;";  
  }
 }

</script>

<style type="text/css">
 .title {
  padding:5px; 
  border:1px solid #CCCCCC;
  font:15px arial; 
  width:300px; 
  cursor:pointer;
  height:20px;
 }

 .item {
  padding:5px; 
  border:1px solid #CCCCCC; 
  font:12px verdana; 
  width:300px;
 }

 .item div {
  border-bottom:1px dashed #CCCCCC;
  padding:5px;
 }

 .button {
  border:1px solid #CCCCCC; 
  padding:5px;
  cursor:pointer;
 }

</style>

</head>
<body>

 </div>
 <div class="title" onClick="javascript:toggleDiv('content1','icon1');">
  <span style="float:left">Sample Title 1</span>
  <span id="icon1" style="float:right">&nbsp;-&nbsp;</span> 
 </div>
 <div id="content1" class="item">
  <div>Item 1</div>
  <div>Item 2</div>
  <div>Item 3</div>
 </div>
 <div class="title" onClick="javascript:toggleDiv('content2','icon2');">
  <span style="float:left">Sample Title 2</span>
  <span id="icon2" style="float:right">&nbsp;-&nbsp;</span> 
 </div>
 <div id="content2" class="item">
  <div>Item 1</div>
  <div>Item 2</div>
  <div>Item 3</div>
 </div>

Here's the code:

<script type="text/javascript">
 // toggle specific
 function toggleDiv(id1,id2) {
  var tag = document.getElementById(id1).style;
  var tagicon = document.getElementById(id2);

  if(tag.display == "none") {
   tag.display = "block";
   tagicon.innerHTML = "&nbsp;-&nbsp;";
  } else {
   tag.display = "none";
   tagicon.innerHTML = "&nbsp;+&nbsp;";
  }
 }

 function expandAll(cnt) {
  for(var x=1; x<=cnt; x++) {
    document.getElementById('content'+x).style.display="block";
    document.getElementById('icon'+x).innerHTML="&nbsp;-&nbsp;";  
  }
 }

 function collapseAll(cnt) {
  for(var x=1; x<=cnt; x++) {
    document.getElementById('content'+x).style.display="none";
    document.getElementById('icon'+x).innerHTML="&nbsp;+&nbsp;";  
  }
 }

</script>

<style type="text/css">
 .title {
  padding:5px; 
  border:1px solid #CCCCCC;
  font:15px arial; 
  width:300px; 
  cursor:pointer;
  height:20px;
 }

 .item {
  padding:5px; 
  border:1px solid #CCCCCC; 
  font:12px verdana; 
  width:300px;
 }

 .item div {
  border-bottom:1px dashed #CCCCCC;
  padding:5px;
 }

 .button {
  border:1px solid #CCCCCC; 
  padding:5px;
  cursor:pointer;
 }

</style>

</head>
<body>

 </div>
 <div class="title" onClick="javascript:toggleDiv('content1','icon1');">
  <span style="float:left">Sample Title 1</span>
  <span id="icon1" style="float:right">&nbsp;-&nbsp;</span> 
 </div>
 <div id="content1" class="item">
  <div>Item 1</div>
  <div>Item 2</div>
  <div>Item 3</div>
 </div>
 <div class="title" onClick="javascript:toggleDiv('content2','icon2');">
  <span style="float:left">Sample Title 2</span>
  <span id="icon2" style="float:right">&nbsp;-&nbsp;</span> 
 </div>
 <div id="content2" class="item">
  <div>Item 1</div>
  <div>Item 2</div>
  <div>Item 3</div>
 </div>

Share Improve this question asked Jun 21, 2012 at 22:12 user994319 2511 gold badge7 silver badges22 bronze badges

Add a ment |

2 Answers 2

Sorted by: Reset to default 2

There are two ways of doing this. For one, you could start all of your html as in the collapsed state by replacing the -'s with +'s and using appropriate css stylings. Alternatively, as suggested you can bind the collapseAll to onload - I would remend looking at Best practice for using window.onload for best practices surrounding window.onload, as you can run into nasty behavior if you aren't careful

<div class="title" onclick="javascript:toggleDiv('content1','icon1');">
                     ^ should be lowercase
  <span style="float:left">Sample Title 1</span>
  <span id="icon1" style="float:right">&nbsp;+&nbsp;</span> 
                                             ^ should expand
 </div>
 <div id="content1" class="item" style="display:none;">
                                 ^ should be hidden  ^
  <div>Item 1</div>
  <div>Item 2</div>
  <div>Item 3</div>
 </div>

But note that non-JS users won't see anything then.

科技改变生活-雨落星辰 - 所有的伟大,都源于一个勇敢的开始

html - Javascript expandcollapse div loading as expanded rather than collapse - Stack Overflow

2 Answers 2

与本文相关的文章

评论列表(0)