Ajax Loader
×
HTML
<div id="accordion">
1
<div id="accordion">
2
  <section id="item1">
3
    <p class="pointer">&#9654;</p><h1><a href="#">A long paragraph</a></h1>
4
    <p>Pellentesque habitant... </p>
5
  </section>
6
  <section id="item2" class="ac_hidden">
7
    <p class="pointer">&#9654;</p><h1><a href="#">A medium paragraph</a></h1>
8
    <p>Pellentesque habitant... </p>
9
  </section>
10
  <section id="item3" class="ac_hidden">
11
    <p class="pointer">&#9654;</p><h1><a href="#">Two short paragraphs</a></h1>
12
    <p>Pellentesque habitant... </p>
13
    <p>Pellentesque habitant... </p>
14
  </section>
15
</div>
 
CSS
#accordion section, #accordion .pointer, #accordion h1, #accordion p {
1
#accordion section, #accordion .pointer, #accordion h1, #accordion p {
2
  -webkit-transition: all 0.5s ease-in-out;
3
  -moz-transition: all 0.5s ease-in-out;
4
  -o-transition: all 0.5s ease-in-out;
5
  transition: all 0.5s ease-in-out;
6
}
7
#accordion {
8
  margin-bottom:30px;
9
}
10
#accordion h1 {
11
  line-height:1.2;
12
  font-size:20px;
13
  background-color:rgba(255,0,0,0.3);
14
  margin:0;
15
  padding: 10px 10px 10px 30px;
16
}
17
 
18
#accordion h1 a {
19
  color:black;
20
}
21
#accordion section {
22
  overflow:hidden;
23
  height:220px;
24
  border:1px #333 solid;
25
}
26
#accordion p {
27
  padding:0 10px;
28
  color:black;
29
}
30
#accordion section.ac_hidden p:not(.pointer) {
31
  color:#fff;
32
}
33
 
34
#accordion section.ac_hidden {
35
  height:44px;
36
}
37
#accordion .pointer {
38
  padding:0;
39
  margin:10px 0 0 6px;
40
  line-height:20px;
41
  width:13px;
42
  position:absolute;
43
}
44
#accordion section:not(.ac_hidden) h1 {
45
  background-color:rgba(255,0,0,0.7);
46
}
47
 
48
#accordion section:not(.ac_hidden) .pointer {
49
  display:block;
50
  -webkit-transform:rotate(90deg);
51
  -moz-transform:rotate(90deg);
52
  -o-transform:rotate(90deg);
53
  transform:rotate(90deg);
54
  padding:0;
55
}
 
JavaScript
$(document).ready(function() {
1
$(document).ready(function() {
2
  $("#accordion section h1").click(function(e) {
3
    $(this).parents().siblings("section").addClass("ac_hidden");
4
    $(this).parents("section").removeClass("ac_hidden");
5
 
6
    e.preventDefault();
7
  });
8
});
 

Untitled

CSSDeck G+