I am Blogger: Div Expand And Collapse In Javascript

[postlink]https://iamdaowner.blogspot.com/2012/06/div-expand-and-collapse-in-javascript.html[/postlink]

Here is a simple code for div expand and collapse. Very useful if you want to hide something in your page and allow the user to expose it.

01<html>
02<head>
03<title>Toggle Div | Expand And Collapse</title>
04<script type="text/javascript">
05 // toggle specific
06 function toggleDiv(id1,id2) {
07  var tag = document.getElementById(id1).style;
08  var tagicon = document.getElementById(id2);
09   
10  if(tag.display == "none") {
11   tag.display = "block";
12   tagicon.innerHTML = "&nbsp;-&nbsp;";
13  } else {
14   tag.display = "none";
15   tagicon.innerHTML = "&nbsp;+&nbsp;";
16  }
17 }
18  
19 function expandAll(cnt) {
20  for(var x=1; x<=cnt; x++) {
21    document.getElementById('content'+x).style.display="block";
22    document.getElementById('icon'+x).innerHTML="&nbsp;-&nbsp;"; 
23  }
24 }
25  
26 function collapseAll(cnt) {
27  for(var x=1; x<=cnt; x++) {
28    document.getElementById('content'+x).style.display="none";
29    document.getElementById('icon'+x).innerHTML="&nbsp;+&nbsp;"; 
30  }
31 }
32  
33</script>
34
35<style type="text/css">
36 .title {
37  padding:5px;
38  border:1px solid #CCCCCC;
39  font:15px arial;
40  width:300px;
41  cursor:pointer;
42  height:20px;
43 }
44  
45 .item {
46  padding:5px;
47  border:1px solid #CCCCCC;
48  font:12px verdana;
49  width:300px;
50 }
51  
52 .item div {
53  border-bottom:1px dashed #CCCCCC;
54  padding:5px;
55 }
56  
57 .button {
58  border:1px solid #CCCCCC;
59  padding:5px;
60  cursor:pointer;
61 }
62  
63</style>
64
65</head>
66<body>
67 <div style="height:28px;">
68  <span class="button" onClick="javascript:expandAll(2);">
69   Expand All
70  </span>
71  <span class="button" onClick="javascript:collapseAll(2);">
72   Collapse All
73  </span>
74 </div>
75 <div class="title" onClick="javascript:toggleDiv('content1','icon1');">
76  <span style="float:left">Sample Title 1</span>
77  <span id="icon1" style="float:right">&nbsp;-&nbsp;</span>
78 </div>
79 <div id="content1" class="item">
80  <div>Item 1</div>
81  <div>Item 2</div>
82  <div>Item 3</div>
83 </div>
84 <div class="title" onClick="javascript:toggleDiv('content2','icon2');">
85  <span style="float:left">Sample Title 2</span>
86  <span id="icon2" style="float:right">&nbsp;-&nbsp;</span>
87 </div>
88 <div id="content2" class="item">
89  <div>Item 1</div>
90  <div>Item 2</div>
91  <div>Item 3</div>
92 </div>
93</body>
94</html>