CSS3 Accordion Horizontal With Blockquote - Mungkin Anda sudah tidak asing lagi jika mendengar kata Accordion. Accordion pada blog hanya sebuah istilah pemberian efek untuk menyimpan atau menyembunyikan sebuah tulisan dengan sistem tab, dimana dalam setiap tab diberi judul dengan beberapa tulisan singkat didalamnya, sehingga disana Anda bisa menampilkan banyak judul dengan bahasan yang berbeda dalam satu tab halaman seperti gambar berikut:

Accordion blockquote image


Sumber - Membuat Profil Menu Efek Slot Tab



Sebagai contoh cara membuat accordion horizontal di blog dengan tampilan simple (sederhana) tanpa adanya sentuhan efek saat membuka label judul, dengan 2 model type untuk membuka pergeseran judul label untuk melihat isi konten dengan type:
  1. Accordion Input Radio Type
  2. Accordion Input Checkbox Type



<style type='text/css'>
.accordion {position:relative;background-color:white}
.accordion > input {
  display:block;margin:0 0;width:100%;
  height:30px;position:relative;cursor:pointer;
  opacity:0;filter:alpha(opacity=0);}

.accordion > label {
  display:block;font:bold 12px/30px Arial,Sans-Serif;
  background-color:black;color:white;
  margin:-30px 0 0 0;padding:0 15px;}

.accordion > div {padding:10px 15px;display:none}
.accordion > input:checked + label + div {display:block}
.accordion > input:checked + label {
  background-color:darkblue;
  border-bottom:2px solid red;
  font:bold italic 15px/30px Georgia;
  color:#FFFF00;text-shadow:1px 2px 3px #222}
</style>
<div class="accordion">// Accordion Input radio type...
<input type="radio" name="a" checked="true"><label>Content One</label><div>
Tuliskan sesuatu di sini....</div>
</div>

<div class="accordion">// Accordion Input checkbox type...
<input type="checkbox"><label>Content One</label><div>
Tuliskan sesuatu di sini....</div>
</div>




DEMO SHOW




Karena tanpa adanya sentuhan efek pada model accordiaon horizontal diatas, tampilannya terkesan biasa. Pertemuan kali ini SAHABAT BLOGGER 77 akan memberikan model Accordion Horizontal versi terbaru type blockquote dengan sentuhan efek-toggle untuk memberikan pergeseran efek yang lembut saat tab judul label di Klik. Dan semua kode berikut sudah valid HTML5 dan CSS3, lengkapnya seperti ini:

CSS3 Accordion Horizontal With Blockquote


<style>
.stage {margin:5px auto;}
ul, .accordionItem, .accordionToggle,
.accordionContent {list-style: none;margin: 0 auto}

.accordionToggle {
 display:block;cursor:pointer;
 background:#990000;
 color:#FFFFFF;padding: 10px 30px;
 border-bottom:1px solid #000}

.accordionItem.open .accordionToggle {
 background:#6495ED;color:#FFFF00;
 border-radius:20px 20px 0 0;
 text-shadow:1px 2px 3px #222}

.accordionContent {
 display:none;color:#000;
 background:#CCCCCC;
 padding: 20px 15px 20px 45px}

.accordionContent:before{
 content: '\201C';position: absolute;
 font:700 75px/normal serif;
 margin:-25px 0 0 -45px;
 color: #0000FF;display:block;
 text-shadow: 7px 14px 10px rgba(0, 0, 0, 0.1)}
</style>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script>
$(document).ready(function(e) {
 var currentToggle;
  var collapseable = false;
 $(".accordionToggle").click(function(e) {
  var item = $(this).parent(".accordionItem");
  if($(this)[0] != currentToggle){
   $(currentToggle).parent(".accordionItem").removeClass("open");
   $(currentToggle).next(".accordionContent").slideUp();
   item.addClass("open");$(this).next(".accordionContent").slideDown();}

  else if(collapseable){
   item.removeClass("open");
   $(currentToggle).next(".accordionContent").slideUp();
   currentToggle = null;
   return;}
   else{item.addClass("open");$(this).next(".accordionContent").slideDown();}
    currentToggle = $(this)[0];
        });
});
</script>

Dan Hasilnya:



DEMO SHOW





Seperti Cara Membuat Label Blogger Accordion Efek Tabulasi pada artikel sebelumnya, untuk pengaturan HTML berikut sudah saya urutkan dengan susunan content tab 1, tab 2 dan seterusnya. Silahkan Anda ganti dengan judul bahasan Anda pada masing-masing tab label dengan HTML seperti ini:


<div class="stage">
   <ul class="accordion">
      <li class="accordionItem"> //content tab 1..
         <h3 class="accordionToggle">Content One</h3>
             <p class="accordionContent">
                    Tulis Sesuatu Disini....
             </p>
      </li>

      <li class="accordionItem"> //content tab 2..
         <h3 class="accordionToggle">Content Two</h3>
             <p class="accordionContent">
                    Tulis Sesuatu Disini....
             </p>
      </li>

//silahkan tambahkan untuk content tab selanjutnya...
      <li class="accordionItem"> //content tab 3..
....
....
   </ul> <!..ending accordion..!>
</div> <!..ending stage..!>



Sekarang Anda sudah memiliki model accordion horizontal versi terbaru dengan tampilan blackquote content CSS3, Anda bisa berkreasi disana dengan menyimpan koleksi gambar misalnya, menu artikel dan bahasan lainnya pada masing-masing tab judul. Jika ada yang kurang dimengerti, mari sama-sama kita bahas dalam kolom cerita dibawah.
Happy Blogging.!

TERIMA KASIH ATAS KUNJUNGAN SAUDARA

Judul= CSS3 Accordion Horizontal With Blockquote
Ditulis oleh= Devy Indriyani
Rating Blog 5 dari 5
Semoga artikel ini bermanfaat bagi saudara. Jika ingin mengutip (meng-Copy), baik itu sebagian atau keseluruhan isi dari artikel ini harap menyertakan link dofollow ke >>
= TERIMA KASIH =

42 komentar

  1. Sudah mulai ngetren nih menu accordion ini. Padahal dulu 3 tahun lalu saya sibuk nyari scrip accordion ini.

    BalasHapus
    Balasan
    1. yang dulu-dulu sekarang sudah menjadi terbaru ya mas, karena apa yang sudah dilupakan akan menjadi tren jika diterbitkan lagi dalam versi yang berbeda. bukan begitu.?

      Hapus
    2. Dn versi nya devy lbh fresh dn cool .... heeee

      Hapus
    3. so pasti mas fiu versi mbak devi pasti lebih fres dan keren deh

      Hapus
  2. TAMPILAN YG KEDUA CAKEP .... PASANG GAK YAH ,,,HEHE :D

    BalasHapus
    Balasan
    1. pasang apa mas, pasang togel..?
      hehe...

      Hapus
    2. emang nomernya berapa mbak
      :d :p

      Hapus
    3. nomor yang mas Fiu pasang, ikutin saja dia, hehe..pasti tembus tekkornya

      Hapus
    4. Sy pasang nomot 8 .... hehehe

      Hapus
    5. saya juga pasang mau no 8 dech kalau gttu biar ga samaan sama mas fiu :d

      Hapus
  3. melihat dan meneliti saya langsung ingat dengan salah satu model sitemap yang mengunakan accordion

    BalasHapus
    Balasan
    1. tujuannya untuk meringkas mas, jadi sangat cantik untuk menyimpan menu link artikel pada daftar isi dengan accordion seperti ini.

      Hapus
    2. Mbak De sungguh kreatif yah membuatnya,. oh ya Mbak saya minta pencerahan tentang absolut dan after juga tentang warna rgb pada effects shadow. contoh misalnya Mbak Devi Buat tulisan Penulis yang ada diform comment yang berwarna fink misalan. jika jika kita mau mebuat bidang baru kode apa yang harus diulai pakai CSS Saja. maksudnya yang saya tanyakan maaf jika di luar topik :)

      Hapus
    3. hmm..harus Devy mulai darimana ya mas, soalnya elemen absolute,after dan shadow adalah deklerasi data yang berbeda. namun gak apa-apa dech kalau mas Saud sudah memilih untuk menanyakan hal itu disini.

      absolute merupakan elemen deklerasi untuk menyatakan posisi letak objek dengan ketentuan - jika layar peramban dinyatakan dengan nilai position:relative pada elemen induk, maka anak elemen yang berada didalamnya kita letakkan dengan deklarasi position:absolute, tujuannya agar objek yang akan kita letakkan dapat merespon koordinat posisi terhadap elemen induk, bukan mengikuti nilai pada layar peramban.

      misalnya dengan pembentukan seperti ini:

      #wrapper {
      position:relative; /* Elemen induk */
      width:300px;
      height:300px;
      }

      #content {
      position:absolute; /* Anak elemen */
      top:0;
      left:0;
      width:100px;
      height:35px;
      }


      Maka hasilnya akan seperti ini:

      http://3.bp.blogspot.com/-qXimH0Nb4rg/VJMGATltTXI/AAAAAAAABgY/Zg2T51Y9WWU/s1600/position.png

      Singkatnya, sebuah elemen dengan deklarasi position:absolute akan menyesuaikan letak posisi terhadap layar peramban, namun akan segera merespon jika nilai elemen induk dinyatakan dengan elemen position:relative

      Kala untuk tex shadow, mas saud bisa pelajari konsepnya di sini:

      >> Text Shadow Element Concept

      Hapus
    4. Keren Euy balasan Mbak Devinya.

      Hapus
    5. Terima kasih atas pencerahanya saya bisa mencerna semua yang Mbak uraikan diatas. namun perlu mencobanya step by step sambil experimen. saya coba coba pada Blog DUMY Saya dulu yaMbak Buat training. (*terimakasih) :)

      Hapus
  4. Mantaf artikelnya mbak devi...!

    BalasHapus
  5. asyik juga ya tulisan posting nya bisa disembunyiin getu, jadi bisa bikin tebak tebakan juga ya di dalam artikel :) bisa juga buat jebakan betmen :D

    BalasHapus
  6. Setelah lihat demo nya seperti di situs situs chating ya mbak.. menarik deh

    BalasHapus
  7. DemoShow:
    Tegas..!
    Tajam..!
    Energik..!

    BalasHapus
  8. ya... sdh ingat. cocoknya di mana

    BalasHapus
  9. cocok nih, nulis konten ga usah panjang kebawah cukup disembunyiin aja pada menu ini ya, ke urg pikir dulu cocoknya sama artikel mana yah hehe..

    BalasHapus
  10. saya masih asing sama yang beginian, ijin belajar di mari (p)

    BalasHapus
  11. Waahhh iya bener, kalo di klik ada tulisannya

    BalasHapus
  12. muantab hasilnya gan dan menarik untuk dipelajari....minimal buat cadangan dipake nantinya. ok terima kasih atas tutorial css3 accordion horizontalnya gan.

    BalasHapus
  13. saya ndak bisa koment apa apa mbak selain salut dan takjub atas artikel artikel yang penuh dengan ilmu, tapi saya akan mencoba untuk terus memahaminya dan ingin seperti mbak yang mampu membuatnya sendiri, sebab itu tekad saya walaupun sampai saat ini belum Terwujud

    BalasHapus
    Balasan
    1. katanya gak bisa komen apa-apa, tetapi mas im komentarnya cukup panjang tuh, hehe..gak apa-apa mas, kata orang ala bisa karena terbiasa, jadi bukan semata-mata karena ilmu.

      Hapus
    2. iya ya mbak, jadi termotivasi ni jadinya, nanti saya bertekad setiap artikel mbak akan saya pelajari :D

      Hapus
  14. saya masih binun mbak Dev, penerapannya gimana, maklum blogger nubi mbak. klo liat demonya, ini mirip spoiler ya mbak Dev??

    BalasHapus
  15. makasih script menu accordionnya mba..selalu inovatif

    BalasHapus
  16. dulu saya pernah menggunakan fungsi accordion ini mbak Devy namun karena beberapa alasan akhirnya saya lepas.. btw, kalau ditambahkan dengan fungsi hover akan lebih menarik juga nich.. :)

    BalasHapus
  17. mantap hasilnya, bisa di terapkan di bagian sidebar nih buat menghemat ruang..

    BalasHapus
    Balasan
    1. Wah betuljuga ya Mbak Dian.. sayangikut deh :)

      Hapus
  18. Salam Malam Mbak Devy. hadir dan simak kembali sambil belajar banyak tentang CSS AAccordion horizontal with blockquote. Makasih atas sharenya nya Mbak Devy :)

    BalasHapus
  19. I have seen a couple of post from your blog "OMG" very interesting blog than i ever seen, I was so attraction till tab in my browser it's full with your post. completely awesome explanation more detail with nice demo. hope we chat more btw off course I'm into to blog and english but my problem just time to do that but with your help I have a shortcut for that both thing.

    BalasHapus
    Balasan
    1. I've been visiting your blog, and your blog discuss about the law, and all the languages in the presentation of the Indonesian language. But why are you commenting using English.? are we not equally from the same country.

      never mind, if you need anything I will gladly help. Because Friend Blogger 77 specials discuss about tips and tricks blogger.
      Thank you for your visit in my blog.

      Hapus
    2. ini balas-balasan bukan spam kah?

      Hapus
    3. baca-baca komentarnya kok serasa ada yg ganjil sama ini wkwk :-)

      Hapus
  20. makin mantap aja nih desain nya, jadi bisa belajar disini tentang kode css bikin acordion keren ya ;)

    BalasHapus
  21. accordion memang mantep.. buat ngerapiin ruang :)

    BalasHapus
  22. Saya suka accordion horizontal dari mbak Devy ini. Tapi jika boleh saya request seperti tampilan punya google mbak, warna dasar putih, border-top dan border-bottom dotted, terus tanda + dan subheading nya mbak. Mudah-mudahan mbak Devy paham maksud saya. :)

    BalasHapus
    Balasan
    1. tampilan seperti google itu bukan accordion mas, tetapi tab content, yang mana dalam satu halaman sudah diberi beberapa title teks dengan sejajar. jika salah satu title diklik maka halaman akan terbuka tanpa diarahkan pada tab baru (jendela baru) untuk menampilkan content teks yang ada didalamnya.
      seperti ini:

      Tampilan Menu Konten Dengan Tabulasi

      Hapus

  • Design
    X
    Teks menu masih dalam tahap perbaikan, Untuk sementara Anda akan dialihkan ke link HOME. Terimakasih.!

    KLIK
  • JQuery
    X
    Teks menu masih dalam tahap perbaikan, Untuk sementara Anda akan dialihkan ke link HOME. Terimakasih.!

    KLIK
  • CSS
    X
    Teks menu masih dalam tahap perbaikan, Untuk sementara Anda akan dialihkan ke link HOME. Terimakasih.!

    KLIK
  • HTML
    X
    Teks menu masih dalam tahap perbaikan, Untuk sementara Anda akan dialihkan ke link HOME. Terimakasih.!

    KLIK
  • JavaScript
    X
    Teks menu masih dalam tahap perbaikan, Untuk sementara Anda akan dialihkan ke link HOME. Terimakasih.!

    KLIK