Ajax Loader
×
HTML
<ul>
1
<ul>
2
  <li><input type="checkbox" id="cb1"/><label for="cb1">Level 1</label>
3
    <ul>
4
      <li><input type="checkbox" id="cb2"/><label for="cb2">Level 2-A</label>
5
          <ul>
6
            <li><label>Level 3-A</label> Content</li>
7
            <li><label>Level 3-B</label> Content</li>
8
          </ul>
9
      </li>
10
      <li><input type="checkbox" id="cb3"/><label for="cb3">Level 2-B</label>
11
      <ul>
12
        <li><input type="checkbox" id="cb5"/><label for="cb5">Level 3-A</label>
13
          <ul>
14
            <li><label>Level 4-A</label> Content</li>
15
            <li><label>Level 4-B</label> Content</li>
16
            <li><label>Level 4-C</label> Content</li>
17
            <li><label>Level 4-D</label> Content</li>
18
          </ul>
19
        </li>
20
      <li><input type="checkbox" id="cb6"/><label for="cb6">Level 3-B</label>
21
          <ul>
22
            <li><label>Level 4-A</label> Content</li>
23
            <li><label>Level 4-B</label> Content</li>
24
          </ul>
25
        </li>
26
      <li><input type="checkbox" id="cb7"/><label for="cb7">Level 3-C</label>
27
          <ul>
28
            <li><label>Level 4-A</label> Content</li>
29
            <li><label>Level 4-B</label> Content</li>
30
            <li><label>Level 4-C</label> Content</li>
31
          </ul>
32
        </li>
33
    </ul>
34
      </li>
35
      <li><input type="checkbox" id="cb4"/><label for="cb4">Level 2-C</label>
36
          <ul>
37
            <li><label>Level 3-A</label> Content</li>
38
          </ul>
39
      </li>
40
    </ul>
41
  </li>
42
</ul>
 
CSS
ul { list-style-type: none; }
1
ul { list-style-type: none; }
2
label{
3
  background-color: #AAAFAB;
4
  border-radius: 5px;
5
  padding: 3px;
6
  padding-left: 25px;
7
  color: white; 
8
}
9
li { 
10
  margin: 10px;
11
  padding: 5px;
12
  border: 1px solid #ABC;
13
  border-radius: 5px;
14
}
15
input[type=checkbox] { display: none; }
16
input[type=checkbox] ~ ul { 
17
  max-height: 0;
18
  max-width: 0;
19
  opacity: 0;
20
  overflow: hidden;
21
  white-space:nowrap;
22
   -webkit-transition:all 1s ease;  
23
   -moz-transition:all 1s ease;  
24
   -o-transition:all 1s ease;  
25
   transition:all 1s ease;  
26
  
27
}
28
input[type=checkbox]:checked ~ ul { 
29
  max-height: 100%;
30
  max-width: 100%;
31
  opacity: 1;
32
}
33
input[type=checkbox] + label:before{
34
  transform-origin:25% 50%;
35
  border: 8px solid transparent;
36
  border-width: 8px 12px; 
37
  border-left-color: white;
38
  margin-left: -20px;
39
  width: 0;
40
  height: 0;
41
  display: inline-block;
42
  text-align: center;
43
  content: '';
44
  color: #AAAFAB;
45
   -webkit-transition:all .5s ease;  
46
   -moz-transition:all .5s ease;  
47
   -o-transition:all .5s ease;  
48
   transition:all .5s ease; 
49
  position: absolute;
50
  margin-top: 1px;
51
}
52
input[type=checkbox]:checked + label:before {
53
  transform: rotate(90deg);
54
  /*margin-top: 6px;
55
  margin-left: -25px;*/
56
}
 

Pure Css3 Expand/Collapse

CSSDeck G+