Reload Page ❖ jQuery Accordion Spritesweb created
Css
Jquery
Html
Result
Show Result

Edit in JSFiddle

xxxxxxxxxx
 
​

https:////example.com/style.css X

 
1
#page-wrap{width:300px;margin:10px auto}
2
a{text-decoration:none}
3
ul{list-style:none}
4
.box{background:#a7a7a7;-moz-border-radius:5px;-webkit-border-radius:5px;border-radius:5px;padding:10px;margin:0 0 15px 0}
5
.box ul li{font-size:11px;margin:0px 0 0 -40px;border-bottom:1px solid #666}
6
.box ul li a{color:#222;display:block;padding:4px 4px;margin:0;border-bottom:1px solid #ccc}
7
.box ul li:last-child,.box ul li:last-child a{border:none}
8
.box ul li a:hover{background:#ccc;text-decoration:none}
9
#catNav{background:#494949;padding:5px 5px 5px 37px;-moz-border-radius:5px;-webkit-border-radius:5px;border-radius:5px;overflow:hidden;margin:0 0 10px 0}
10
#catNav li{display:inline}
11
#catNav li a{display:block;width:50px;height:50px;text-indent:-9999px;background:url(https://https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj4m9u6hy2Bb-IiL7g93gptZzdosmiwhYTPJxHWsskxFiMZJ-faY-7QzZDyWHbhtt_jo0wPvLFDHfOENDJHam2VQ201U504hydMP2oiDCbs7ACS0eBLoysvGWV8YhLjn_BD6JxmZKJDDxg/s1600/catSprite.png);float:left;border:none;padding:0}
12
#catNav li a#list-one-button{background-position:-50px -50px}
13
#page-wrap #catNav li.activeCatButton a#list-one-button{background-position:-50px -100px}
14
#catNav li a#list-one-button:hover{background-position:-50px 0}
15
#catNav a#list-two-button{background-position:-100px -50px}
16
#page-wrap #catNav li.activeCatButton a#list-two-button{background-position:-100px -100px}
17
#catNav li a#list-two-button:hover{background-position:-100px 0}
18
#catNav a#list-three-button{background-position:0 -50px}
19
#page-wrap #catNav li.activeCatButton a#list-three-button{background-position:0 -100px}
20
#catNav li a#list-three-button:hover{background-position:0 0}
21
#catNav a#list-four-button{background-position:-150px -50px}
22
#page-wrap #catNav li.activeCatButton a#list-four-button{background-position:-150px -100px}
23
#catNav li a#list-four-button:hover{background-position:-150px 0}
xxxxxxxxxx
 
​

https:////example.com/script.js X

​x
 
1
$(function() {
2
    $("#list-one").show();
3
    $("#list-two").hide();
4
    $("#list-three").hide();
5
    $("#list-four").hide();
6
​
7
    $("#list-one-button").click(function() {
8
        $(".cat-list").slideUp(600);
9
        $("#list-one").slideDown(600);
10
    });
11
​
12
    $("#list-two-button").click(function() {
13
        $(".cat-list").slideUp(600);
14
        $("#list-two").slideDown(600);
15
    });
16
​
17
    $("#list-three-button").click(function() {
18
        $(".cat-list").slideUp(600);
19
        $("#list-three").slideDown(600);
20
    });
21
​
22
    $("#list-four-button").click(function() {
23
        $(".cat-list").slideUp(600);
24
        $("#list-four").slideDown(600);
25
    });
26
​
27
    $("#catNav li a").click(function() {
28
        $("#catNav li").removeClass("activeCatButton");
29
        $(this).parent().addClass("activeCatButton");
30
    });
31
});
61
 
1
<div id="page-wrap"><div class="box">
2
   <ul id="catNav">
3
    <li class=""><a id="list-one-button">Apple</a></li>
4
    <li class=""><a id="list-two-button">Linux</a></li>
5
    <li class="activeCatButton"><a id="list-three-button">Microsoft</a></li>
6
    <li class=""><a id="list-four-button">News</a></li>
7
   </ul>
8
9
   <ul style="display: none;" class="cat-list" id="list-one">
10
    <li><a href="#">ITP +] ~ Kumpulan berbagai tutorial dari dunia online</a></li>
11
    <li><a href="https:////idtutorplus.blogspot.com/p/tingkat-dasar.html">Dasar ~ Bloging merupakan hal yang poerlu diketahui</a></li>
12
    <li><a href="https:////idtutorplus.blogspot.com/p/menengah.html">Menengah ~ Lakukan modifikasi blog anda</a></li>
13
    <li><a href="https:////idtutorplus.blogspot.com/p/tingkat-lanjut.html">Tingkat Lanjut ~ Mantapkan blogger anda selanjutnya</a></li>
14
    <li><a href="https:////idtutorplus.blogspot.com/search/label/Eksperimen">Eksperimen ~ Lakukan percobaan demi trend-nya blog</a></li>
15
    <li><a href="https:////idtutorplus.blogspot.com/search/label/Template">Template ~ Blogmu adalah aplikasimu</a></li>
16
    <li><a href="https:////idtutorplus.blogspot.com/search/label/Widget">Widget ~ Accessories blogger for you</a></li>
17
    <li><a href="https:////idtutorplus.blogspot.com/search/label/Posting">Posting ~ Artikelmu merupakan ocehan hatimu</a></li>
18
    <li><a href="https:////idtutorplus.blogspot.com/search/label/HTML 5">HTML5 ~ Validkah blogger Anda diu w3Validation..??</a></li>
19
    <li><a href="https:////idtutorplus.blogspot.com/search/label/CSS">CSS ~ Penerapan CSS sekomplit yang Anda cari</a></li>
20
   </ul>
21
​
22
   <ul style="display: none;" class="cat-list" id="list-two">
23
    <li><a href="#">ITP +] ~ Kumpulan berbagai tutorial dari dunia online</a></li>
24
    <li><a href="https:////idtutorplus.blogspot.com/p/tingkat-dasar.html">Dasar ~ Bloging merupakan hal yang poerlu diketahui</a></li>
25
    <li><a href="https:////idtutorplus.blogspot.com/p/menengah.html">Menengah ~ Lakukan modifikasi blog anda</a></li>
26
    <li><a href="https:////idtutorplus.blogspot.com/p/tingkat-lanjut.html">Tingkat Lanjut ~ Mantapkan blogger anda selanjutnya</a></li>
27
    <li><a href="https:////idtutorplus.blogspot.com/search/label/Eksperimen">Eksperimen ~ Lakukan percobaan demi trend-nya blog</a></li>
28
    <li><a href="https:////idtutorplus.blogspot.com/search/label/Template">Template ~ Blogmu adalah aplikasimu</a></li>
29
    <li><a href="https:////idtutorplus.blogspot.com/search/label/Widget">Widget ~ Accessories blogger for you</a></li>
30
    <li><a href="https:////idtutorplus.blogspot.com/search/label/Posting">Posting ~ Artikelmu merupakan ocehan hatimu</a></li>
31
    <li><a href="https:////idtutorplus.blogspot.com/search/label/HTML 5">HTML5 ~ Validkah blogger Anda diu w3Validation..??</a></li>
32
    <li><a href="https:////idtutorplus.blogspot.com/search/label/CSS">CSS ~ Penerapan CSS sekomplit yang Anda cari</a></li>
33
   </ul>
34
​
35
   <ul style="display: block;" class="cat-list" id="list-three">
36
    <li><a href="#">ITP +] ~ Kumpulan berbagai tutorial dari dunia online</a></li>
37
    <li><a href="https:////idtutorplus.blogspot.com/p/tingkat-dasar.html">Dasar ~ Bloging merupakan hal yang poerlu diketahui</a></li>
38
    <li><a href="https:////idtutorplus.blogspot.com/p/menengah.html">Menengah ~ Lakukan modifikasi blog anda</a></li>
39
    <li><a href="https:////idtutorplus.blogspot.com/p/tingkat-lanjut.html">Tingkat Lanjut ~ Mantapkan blogger anda selanjutnya</a></li>
40
    <li><a href="https:////idtutorplus.blogspot.com/search/label/Eksperimen">Eksperimen ~ Lakukan percobaan demi trend-nya blog</a></li>
41
    <li><a href="https:////idtutorplus.blogspot.com/search/label/Template">Template ~ Blogmu adalah aplikasimu</a></li>
42
    <li><a href="https:////idtutorplus.blogspot.com/search/label/Widget">Widget ~ Accessories blogger for you</a></li>
43
    <li><a href="https:////idtutorplus.blogspot.com/search/label/Posting">Posting ~ Artikelmu merupakan ocehan hatimu</a></li>
44
    <li><a href="https:////idtutorplus.blogspot.com/search/label/HTML 5">HTML5 ~ Validkah blogger Anda diu w3Validation..??</a></li>
45
    <li><a href="https:////idtutorplus.blogspot.com/search/label/CSS">CSS ~ Penerapan CSS sekomplit yang Anda cari</a></li>
46
   </ul>
47
​
48
   <ul style="display: none;" class="cat-list" id="list-four">
49
    <li><a href="#">ITP +] ~ Kumpulan berbagai tutorial dari dunia online</a></li>
50
    <li><a href="https:////idtutorplus.blogspot.com/p/tingkat-dasar.html">Dasar ~ Bloging merupakan hal yang poerlu diketahui</a></li>
51
    <li><a href="https:////idtutorplus.blogspot.com/p/menengah.html">Menengah ~ Lakukan modifikasi blog anda</a></li>
52
    <li><a href="https:////idtutorplus.blogspot.com/p/tingkat-lanjut.html">Tingkat Lanjut ~ Mantapkan blogger anda selanjutnya</a></li>
53
    <li><a href="https:////idtutorplus.blogspot.com/search/label/Eksperimen">Eksperimen ~ Lakukan percobaan demi trend-nya blog</a></li>
54
    <li><a href="https:////idtutorplus.blogspot.com/search/label/Template">Template ~ Blogmu adalah aplikasimu</a></li>
55
    <li><a href="https:////idtutorplus.blogspot.com/search/label/Widget">Widget ~ Accessories blogger for you</a></li>
56
    <li><a href="https:////idtutorplus.blogspot.com/search/label/Posting">Posting ~ Artikelmu merupakan ocehan hatimu</a></li>
57
    <li><a href="https:////idtutorplus.blogspot.com/search/label/HTML 5">HTML5 ~ Validkah blogger Anda diu w3Validation..??</a></li>
58
    <li><a href="https:////idtutorplus.blogspot.com/search/label/CSS">CSS ~ Penerapan CSS sekomplit yang Anda cari</a></li>
59
   </ul>
60
  </div>
61
 </div>