EN
HTML - simple expander example
2 points
In this article we would like to show you, how to create simple expander.
xxxxxxxxxx1
2
<html lang="en">3
<head>4
<meta charset="UTF-8">5
<title>Simple expander with jQuery</title>6
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>7
<style>8
.section {9
width: 500px;10
border: solid black 1px;11
padding: 5px;12
margin: 5px;13
}14
15
.hidden-list {16
display: none;17
transition:opacity 1500ms;18
}19
</style>20
<script>21
$(document).ready(function() {22
function addElementToExpander(elemId) {23
var isVisible = false;24
var listId = elemId + "-list"; // section-1-list25
var signId = elemId + "-sign"; // section-1-sign26
$(elemId).click(function() {27
if (isVisible) {28
$(listId).hide(300);29
$(signId).text("\\/");30
isVisible = false;31
} else {32
$(listId).show(300);33
$(signId).text("/\\");34
isVisible = true;35
}36
});37
}38
addElementToExpander("#section-1");39
addElementToExpander("#section-2");40
});41
</script>42
</head>43
<body style="height: 300px;">44
<div class="section" id="section-1" style="overflow: auto;">45
<div style="float: left;">Section 1</div>46
<div id="section-1-sign" style="float: right;">\/</div>47
<div style="clear: both;"></div>48
<ul id="section-1-list" class="hidden-list">49
<li>Apple</li>50
<li>Banana</li>51
<li>Orange</li>52
</ul>53
</div>54
<div class="section" id="section-2" style="overflow: auto;">55
<div style="float: left;">Section 2</div>56
<div id="section-2-sign" style="float: right;">\/</div>57
<div style="clear: both;"></div>58
<ul id="section-2-list" class="hidden-list">59
<li>A</li>60
<li>B</li>61
<li>C</li>62
</ul>63
</div>64
</body>65
</html>
