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
| <!DOCTYPE HTML>
<html>
<head>
<meta charset="UTF-8">
<title>toggleClass</title>
<meta name="Author" content="NoSmoking">
<style>
html, body{
margin:0;
padding:0;
font: 1em/1.5 Verdana, sans-serif;
}
#main {
width:60em;
margin:0 auto;
}
h1, h2, h3 {
color:#069;
}
h2.open {
cursor:pointer;
}
h2.expand:after{
content:'\0025BC';
}
h2.collapse:after{
content:'\0025B2';
}
h2.open + p{
display:none;
}
</style>
<script src="http://code.jquery.com/jquery-1.10.2.js"></script>
<script>
</script>
</head>
<body>
<div id="main">
<h2 class="expand open">Recherche</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum et efficitur orci, a aliquam odio. Etiam non euismod tortor. Phasellus venenatis bibendum lectus, tempor sollicitudin mauris pretium in. Etiam non ex vitae dui fermentum sodales sed id orci. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Proin id consectetur enim, et tempor nulla. Pellentesque vitae accumsan nulla, ut blandit nisl. Aliquam justo erat, sollicitudin nec facilisis non, faucibus aliquam ante. Nunc luctus ligula eget justo mattis consequat.</p>
<h2 class="expand open">Recherche</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum et efficitur orci, a aliquam odio. Etiam non euismod tortor. Phasellus venenatis bibendum lectus, tempor sollicitudin mauris pretium in. Etiam non ex vitae dui fermentum sodales sed id orci. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Proin id consectetur enim, et tempor nulla. Pellentesque vitae accumsan nulla, ut blandit nisl. Aliquam justo erat, sollicitudin nec facilisis non, faucibus aliquam ante. Nunc luctus ligula eget justo mattis consequat.</p>
</div>
<script>
$(".open").on('click', function() {
$(this)
.toggleClass('expand collapse')
.next().slideToggle("slow");
});
</script>
</body>
</html> |
Partager