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.
Expand Div:
Collapse Div:
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 = " - "; |
13 | } else { |
14 | tag.display = "none"; |
15 | tagicon.innerHTML = " + "; |
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=" - "; |
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=" + "; |
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"> - </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"> - </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> |
Expand Div:
0 comments:
Post a Comment