CSS3 Accordion Horizontal With Blockquote

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:

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.!