/
example.html
77 lines (77 loc) · 3.65 KB
/
example.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
<title>Collapsible Panel Example</title>
<script type="text/javascript" src="jquery-1.4.3.min.js"></script>
<script type="text/javascript" src="jquery.collapsiblePanel.js"></script>
<script type="text/javascript">
$().ready(function () {
$('#wrapDiv').click(function() {
$('#collapseExampleTable').collapsiblePanel({
panelId: "collapseExampleTablePanel",
titleQuery: "#collapseExampleTableTitle"
});
$('#collapseExampleParagraph').collapsiblePanel({
panelId: "collapseExampleParagraphPanel",
titleQuery: "#collapseExampleParagraphTitle"
});
$('#preCollapsedExampleParagraph').collapsiblePanel({
panelId: "preCollapsedExampleParagraphPanel",
titleQuery: "#preCollapsedExampleParagraphTitle",
collapsedImage: "panelCollapsedAlt.png",
expandedImage: "panelExpandedAlt.png",
startCollapsed: true
});
$('#sansTitleQueryExampleParagraph').collapsiblePanel({
panelId: "sansTitleQueryPanel",
collapsedImage: "panelCollapsedReversed.png"
});
});
});
</script>
<link type="text/css" rel="stylesheet" href="example.css"/>
<link type="text/css" rel="stylesheet" href="collapsiblePanel.css"/>
</head>
<body>
<div id="exampleContainer">
<h3 id="collapseExampleTableTitle">Collapsible Panel Example</h3>
<table id="collapseExampleTable">
<thead>
<tr>
<th>Name</th>
<th>Quanity</th>
<th>Price</th>
</tr>
</thead>
<tbody>
<tr>
<td>120 volt Incandescent Light Bulb</td>
<td>5</td>
<td>$100.00</td>
</tr>
<tr>
<td>Gallon Leaded Gasoline</td>
<td>30</td>
<td>$200.00</td>
</tr>
<tr>
<td>Windows Millenium Retail Edition Full</td>
<td>1</td>
<td>$79.99</td>
</tr>
</tbody>
</table>
<br/>
<h3 id="collapseExampleParagraphTitle">Collapsible Panel Example</h3>
<p id="collapseExampleParagraph">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce vehicula laoreet eros quis volutpat. Maecenas a libero et justo sagittis eleifend eu vitae nunc. Phasellus vulputate egestas porttitor. Integer a purus eu libero volutpat dictum. Fusce ultricies nisi ut dui ultrices semper. Vivamus auctor sollicitudin sem eget euismod. Curabitur eget sapien turpis. Quisque quis sem risus. Nullam non tellus eros. Nulla in lectus odio.</p>
<h3 id="preCollapsedExampleParagraphTitle">Precollapsed Example</h3>
<p id="preCollapsedExampleParagraph">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce vehicula laoreet eros quis volutpat. Maecenas a libero et justo sagittis eleifend eu vitae nunc. Phasellus vulputate egestas porttitor. Integer a purus eu libero volutpat dictum. Fusce ultricies nisi ut dui ultrices semper. Vivamus auctor sollicitudin sem eget euismod. Curabitur eget sapien turpis. Quisque quis sem risus. Nullam non tellus eros. Nulla in lectus odio.</p>
<h3 id="sansTitleQueryExampleParagraphTitle">Sans titleQuery with Right Aligned Toggle Example</h3>
<p id="sansTitleQueryExampleParagraph">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce vehicula laoreet eros quis volutpat. Maecenas a libero et justo sagittis eleifend eu vitae nunc. Phasellus vulputate egestas porttitor. Integer a purus eu libero volutpat dictum. Fusce ultricies nisi ut dui ultrices semper. Vivamus auctor sollicitudin sem eget euismod. Curabitur eget sapien turpis. Quisque quis sem risus. Nullam non tellus eros. Nulla in lectus odio.</p>
<form id="frmOne" action="." method="post">
<p><input type="button" id="wrapDiv" value="Wrap Div"/></p>
</form>
</div>
</body>
</html>