article

Sunday, August 26, 2018

Create a jquery simple accordion

Create a jquery simple accordion
?
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
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Create a jquery simple accordion</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.0/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
 $('.container').hide();
 $('.accordiontrigger:first').addClass('active').next().show(); //"active" class to first trigger, when click show next container
 $('.accordiontrigger').click(function(){ //On Click
  if( $(this).next().is(':hidden') ) { //next container is closed
   $('.accordiontrigger').removeClass('active').next().slideUp(); //Remove all .accordiontrigger classes and slide up the immediate next container
   $(this).toggleClass('active').next().slideDown(); //Add .accordiontrigger class to clicked trigger and slide down the immediate next container
  }
  return false; //Prevent the browser jump to the link anchor
 });
});
</script>
</head>
<body>
<div class="wrapper">
 <h2 class="accordiontrigger"><a href="">Praesent duis vel similis usitas</a></h2>
 <div class="container">
  <div class="block">
   <p>Consequat te olim letalis premo ad hos olim odio olim indoles ut venio iusto. Euismod, sagaciter diam neque antehabeo blandit, jumentum transverbero luptatum. Lenis vel diam praemitto molior facilisi facilisi suscipere abico, ludus, at. Wisi suscipere nisl ad capto comis esse, autem genitus. Feugiat immitto ullamcorper hos luptatum gilvus eum. Delenit patria nunc os pneum acsi nulla magna singularis proprius autem exerci accumsan. </p>
  </div>
 </div>
 <h2 class="accordiontrigger"><a href="">hos olim odio olim indoles</a></h2>`
 <div class="container">
  <div class="block">
   <p>Consequat te olim letalis premo ad hos olim odio olim indoles ut venio iusto. Euismod, sagaciter diam neque antehabeo blandit, jumentum transverbero luptatum. Lenis vel diam praemitto molior facilisi facilisi suscipere abico, ludus, at. Wisi suscipere nisl ad capto comis esse, autem genitus. Feugiat immitto ullamcorper hos luptatum gilvus eum. Delenit patria nunc os pneum acsi nulla magna singularis proprius autem exerci accumsan. </p>
  </div>
 </div>
 <h2 class="accordiontrigger"><a href="">Euismod, v blandit, jumentum</a></h2>
 <div class="container">
  <div class="block">
   <p>Consequat te olim letalis premo ad hos olim odio olim indoles ut venio iusto. Euismod, v blandit, jumentum transverbero luptatum. Lenis vel diam praemitto molior facilisi facilisi suscipere abico, ludus, at. Wisi suscipere nisl ad capto comis esse, autem genitus. Feugiat immitto ullamcorper hos luptatum gilvus eum. Delenit patria nunc os pneum acsi nulla magna singularis proprius autem exerci accumsan. </p>
  </div>
 </div>
</div>
<style>
body {
 font: 10px normal Arial, Helvetica, sans-serif;
 margin: 0;
 padding: 0;
 line-height: 1.7em;
}
*, * focus {
 outline: none;
 margin: 0;
 padding: 0;
}
.wrapper {
 width: 500px;
 margin: 0 auto;margin-top:50px;
}
h2.accordiontrigger {
 padding: 0; margin: 0 0 5px 0;
 background: url(img/01.gif) no-repeat;
 height: 46px; line-height: 46px;
 width: 500px;
 font-size: 2em;
 font-weight: normal;
 float: left;
}
h2.accordiontrigger a {
 color: #fff;
 text-decoration: none;
 display: block;
 padding: 0 0 0 50px;
}
h2.accordiontrigger a:hover {
 color: #ccc;
}
h2.active {background-position: left bottom;}
.container {
 margin: 0 0 5px; padding: 0;
 overflow: hidden;
 font-size: 1.2em;
 width: 500px;
 clear: both;
 background: #f0f0f0;
 border: 1px solid #d6d6d6;
 -webkit-border-bottom-right-radius: 5px;
 -webkit-border-bottom-left-radius: 5px;
 -moz-border-radius-bottomright: 5px;
 -moz-border-radius-bottomleft: 5px;
 border-bottom-right-radius: 5px;
 border-bottom-left-radius: 5px;
}
.container .block {
 padding: 20px;
}
.container .block p {
 padding: 5px 0;
 margin: 5px 0;
}
.container h3 {
 font: 2.5em normal Georgia, "Times New Roman", Times, serif;
 margin: 0 0 10px;
 padding: 0 0 5px 0;
 border-bottom: 1px dashed #ccc;
}
.container img {
 float: left;
 margin: 10px 15px 15px 0;
 padding: 5px;
 background: #ddd;
 border: 1px solid #ccc;
}
</style>
</body>
</html>

Posted by ednalan at 11:16 PM . Under .

Related Post