Membuat Accordion Sederhana Dengan CSS3

Sobat blogger setelah sebelumnya Kolom Tutorial™ membahas tentang  Membuat Accordion Vallenato Kali ini pun masih sama masih tentang pmbuatan sebuah Accordion namun sekarang bedanya hanya menggunakan CSS3 dan HTML tanpa adanya Javascript  untuk previewnya kurang lebih seperti ini :

Accordion, Css3, accordion Sederhana


Tutorial penerapannya sbb:-

  1. Seperti biasa sobat Login ke akun Blogger sobat
  2. Klik Tataletak >>> Add Widget lalu kopas kode dibawah ini

UNTUK KODE CSS NYA
<style type="text/css">
.accordion {
    color: #000000;
    margin: 50px auto;
    position: relative;
    width: 590px;
}
.accordion span {
    display: none
}
.tabs {
    background-color: #FFFFFF;
    overflow: hidden;
}
.tabs dl dd a {
    background-color: #C8CEFF;
    border: 1px solid;
    border-color:#ccc;border-bottom-color:#aaa;
    display: block;
    font-size: 18px;
    line-height: 32px;
    padding: 5px 20px;
    text-decoration: none;

    filter:progid:DXImageTransform.Microsoft.Gradient(GradientType=0,StartColorStr=#ffffffff,EndColorStr=#ffe0e0e0);
    background-image: -moz-linear-gradient(top,#fff 0,#e0e0e0 100%);
    background-image: -ms-linear-gradient(top,#fff 0,#e0e0e0 100%);
    background-image:-o-linear-gradient(top,#fff 0,#e0e0e0 100%);
    background-image: -webkit-gradient(linear,left top,left bottom,color-stop(0,#fff),color-stop(100%,#e0e0e0));
    background-image: -webkit-linear-gradient(top,#fff 0,#e0e0e0 100%);
    background-image: linear-gradient(to bottom,#fff 0,#e0e0e0 100%);

    -moz-transition: 0.3s;
    -ms-transition: 0.3s;
    -o-transition: 0.3s;
    -webkit-transition: 0.3s;
    transition: 0.3s;
}
.tabs dl dd div {
    background-color: #FFF;
    height: 0;
    overflow: hidden;

    box-shadow: 0 0 1px rgba(0, 0, 0, 1) inset;
    -moz-box-shadow: 0 0 1px rgba(0, 0, 0, 1) inset;
    -webkit-box-shadow: 0 0 1px rgba(0, 0, 0, 1) inset;

    -webkit-transition: all 0.3s ease-in-out;
    -moz-transition: all 0.3s ease-in-out;
    -o-transition: all 0.3s ease-in-out;
    -ms-transition: all 0.3s ease-in-out;
    transition: all 0.3s ease-in-out;
}
.tabs dl dd div p {
    color: #444444;
    font-size: 13px;
    padding: 15px;
    text-align: justify;
}
.tabs dl dd a:hover {
    box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.5) inset;
    -moz-box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.5) inset;
    -webkit-box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.5) inset;
}
.tabs dl dd a:active {
    filter:progid:DXImageTransform.Microsoft.Gradient(GradientType=0,StartColorStr=#e6e6e6,EndColorStr=#dcdcdc);
    background-image: -moz-linear-gradient(top,#e6e6e6 0,#dcdcdc 100%);
    background-image: -ms-linear-gradient(top,#e6e6e6 0,#dcdcdc 100%);
    background-image: -o-linear-gradient(top,#e6e6e6 0,#dcdcdc 100%);
    background-image: -webkit-gradient(linear,left top,left bottom,color-stop(0,#e6e6e6),color-stop(100%,#dcdcdc));
    background-image: -webkit-linear-gradient(top,#e6e6e6 0,#dcdcdc 100%);
    background-image: linear-gradient(to bottom,#e6e6e6 0,#dcdcdc 100%);
}
#tab1:target ~ .tabs .tab1 dd div {
    height: 100px;
}
#tab2:target ~ .tabs .tab2 dd div {
    height: 345px;
}
#tab3:target ~ .tabs .tab3 dd div {
    height: 235px;
}
#tab4:target ~ .tabs .tab4 dd div {
    height: 235px;
}
#tab1:target ~ .tabs .tab1 dd a,
#tab2:target ~ .tabs .tab2 dd a,
#tab3:target ~ .tabs .tab3 dd a,
#tab4:target ~ .tabs .tab4 dd a {
    filter:progid:DXImageTransform.Microsoft.Gradient(GradientType=0,StartColorStr=#e6e6e6,EndColorStr=#dcdcdc);
    background-image: -moz-linear-gradient(top,#e6e6e6 0,#dcdcdc 100%);
    background-image: -ms-linear-gradient(top,#e6e6e6 0,#dcdcdc 100%);
    background-image: -o-linear-gradient(top,#e6e6e6 0,#dcdcdc 100%);
    background-image: -webkit-gradient(linear,left top,left bottom,color-stop(0,#e6e6e6),color-stop(100%,#dcdcdc));
    background-image: -webkit-linear-gradient(top,#e6e6e6 0,#dcdcdc 100%);
    background-image: linear-gradient(to bottom,#e6e6e6 0,#dcdcdc 100%);

    box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.5) inset;
    -moz-box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.5) inset;
    -webkit-box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.5) inset;
}

</style>

UNTUK KODE HTML NYA

<div class="accordion">
    <span id="tab1"></span>
    <span id="tab2"></span>
    <span id="tab3"></span>
    <span id="tab4"></span>
  
    <div class="tabs">
        <dl class="tab1">
            <dd>
                <a href="#tab1">CSS</a>
                <div><p>ISI DENGAN KONTEN SOBAT</p></div>
            </dd>
        </dl>
        <dl class="tab2">
            <dd>
                <a href="#tab2">HTML</a>
                <div>
                    <p>ISI DENGAN KONTEN SOBAT</p></div>
            </dd>
        </dl>
        <dl class="tab3">
            <dd>
                <a href="#tab3">JQUERY</a>
                <div><p>ISI DENGAN KONTEN SOBAT</p></div>
            </dd>
        </dl>
        <dl class="tab4">
            <dd>
                <a href="#tab4">JAVASCRIPT</a>
                <div><p>ISI DENGAN KONTEN SOBAT</p></div>
            </dd>
        </dl>
    </div>
</div>

4. Klik save

Demikian artikel tentang cara Membuat Accordion Sederhana Dengan CSS3, Semoga bermanfaat.

Berlangganan update artikel terbaru via email:

11 Responses to "Membuat Accordion Sederhana Dengan CSS3"

  1. Replies
    1. Hehhehhe bisa aja ah,, iya nih kan suka yang panjang2 hehheheh

      Delete
  2. Mas alex..memang jagonya deh soal tutorial... :)
    Sip mas nanti ta coba...nunggu waktu luang...hehe

    ReplyDelete
  3. Mas alex..memang jagonya deh soal tutorial... :)
    Sip mas nanti ta coba...nunggu waktu luang...hehe

    ReplyDelete
    Replies
    1. biasa aja mas ahhhhh, ane masih belajar, ok mas, terimakasih banyak atas kunjungannya.

      Delete
  4. berkunjung meski harus menerobos banjiran kang :D

    ReplyDelete
    Replies
    1. wkkwkwkkwk, bisa banget ni mas cahyo. terimakasih banyak gan kunjungannya ntar disuguhin kopi hangat, heheh

      Delete
  5. selamat siang kang alex mf mau cari bantuan saya sempetin berkunjung,,,cuaca makin extrime nih,,, kopinya bwt tr malem ya :D

    ReplyDelete
  6. lama tak jumpa makin oke aja tutornya ...
    nanti tak coba sobat

    ReplyDelete
  7. wah ini tutorial yang saya cari2, keren sob, terima kasih sudah berbagi...

    ReplyDelete

Terimakasih banyak atas kunjungannya, salam silatuhami Alexjoen

Iklan Atas Artikel

Iklan Tengah Artikel 1

Iklan Tengah Artikel 2

Iklan Bawah Artikel