Wednesday, April 11, 2012

Menu Akordion dengan Jquery

Kali ini saya akan membahas tentang cara bagaimana membuat menu akordion di blog. Saya dapatkan tutorial ini dari blog sebelah yaitu http://hompimpaalaihumgambreng.blogspot.com


Langsung saja untuk langkah pertama buat kerangka CSS nya yaitu dengan menyalin script berikut pada edit HTML dan letakkan di atas kode ]]></b:skin>
#akordion {
padding:0;
}
#akordion h2 {
cursor:pointer;
margin:0;
padding:10px 20px;
background:#344317;
color:#fff;
font:bold 10px Georgia,Serif;
text-transform:uppercase;
}
.panel-akordion {
background:#88AE27;
color:#fff;
padding:10px;
}
Langkah berikutnya adalah pemanggilan JQuery 1.3.2 letakkan script berikut di atas kode </head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js" type="text/javascript">
</script>
Lalu salin kode di bawah ini dan letakkan di atas kode </head> atau di bawah script Jquery di atas

<script type="text/javascript">
$(document).ready(function() {
$('.panel-akordion').hide();
$('#akordion h2').click(function() {
$('.panel-akordion').slideUp(500);
$(this).next().slideDown(500);
});
});
</script>
Dan yang terakhir letakkan script berikut di mana saja yang anda kehendaki
<div id='akordion'>
<h2>Tombol Akordion</h2>
<div class='panel-akordion'>
KONTEN DI SINI
</div>
<h2>Tombol Akordion</h2>
<div class='panel-akordion'>
KONTEN DI SINI
</div>
<h2>Tombol Akordion</h2>
<div class='panel-akordion'>
KONTEN DI SINI
</div>
<h2>Tombol Akordion</h2>
<div class='panel-akordion'>
KONTEN DI SINI
</div>
<h2>Tombol Akordion</h2>
<div class='panel-akordion'>
KONTEN DI SINI
</div>
</div>
Selesai. Bila ada yang ingin ditanyakan silahkan di kolom komen.

8 comments:

  1. gan gimana itu supaya tab ny ga ketutup semua, misal ny satu konten keebuka otomatis,,

    ReplyDelete
    Replies
    1. Pakek ini mas:

      Kerangka script:
      <script type='text/javascript'>
      $(function(){
      $('.quote2,.quote3,.quote4').hide();
      $('.open1').click(function(){
      $('.quote').slideToggle('slow');
      $('.quote2,.quote3,.quote4').slideUp('slow');
      return false;
      });
      $('.open2').click(function(){
      $('.quote2').slideToggle('slow');
      $('.quote,.quote3,.quote4').slideUp('slow');
      return false;
      });
      $('.open3').click(function(){
      $('.quote3').slideToggle('slow');
      $('.quote,.quote2,.quote4').slideUp('slow');
      return false;
      });
      $('.open4').click(function(){
      $('.quote4').slideToggle('slow');
      $('.quote,.quote2,.quote3').slideUp('slow');
      return false;
      });
      });
      </script>

      Kerangka HTML:
      <div class='open1'><a href='#'>Tombol Akordion</a></div>
      <div class='quote'>
      TULISAN ANDA DI SINI
      </div>
      <div class='open2'><a href='#'>Tombol Akordion</a></div>
      <div class='quote2'>
      TULISAN ANDA DI SINI
      </div>
      <div class='open3'><a href='#'>Tombol Akordion</a></div>
      <div class='quote3'>
      TULISAN ANDA DI SINI
      </div>
      <div class='open4'><a href='#'>Tombol Akordion</a></div>
      <div class='quote4'>
      TULISAN ANDA DI SINI
      </div>

      Kerangka CSS:
      .open1 a,.open2 a,.open3 a,.open4 a{
      padding:7px;
      text-align:center;
      border-radius:7px;
      -webkit-border-radius:7px;
      -moz-border-radius:7px;
      -o-border-radius:7px;
      -ms-border-radius:7px;
      background:#39F;
      background-image:linear-gradient(-90deg,rgba(255,255,255,0.5),rgba(255,255,254,0));
      background-image:-webkit-linear-gradient(-90deg,rgba(255,255,255,0.5),rgba(255,255,254,0));
      background-image:-moz-linear-gradient(-90deg,rgba(255,255,255,0.5),rgba(255,255,254,0));
      background-image:-o-linear-gradient(-90deg,rgba(255,255,255,0.5),rgba(255,255,254,0));
      background-image:-ms-linear-gradient(-90deg,rgba(255,255,255,0.5),rgba(255,255,254,0));
      }

      .quote,.quote2,.quote3,.quote4{
      display:block;
      font-weight:normal;
      position:relative;
      background-color:#EEE;
      color:#111;
      border-radius:5px;
      text-shadow:0 1px 0 rgba(0,0,0,0.2);
      margin:.75em 0;
      padding:15px 20px;
      border:3px solid blue;
      }
      .quote:before,.quote2:before,.quote3:before,.quote4:before {
      content:"";
      width:0;
      height:0;
      position:absolute;
      bottom:100%;
      right:400px;
      border-color:transparent transparent blue;
      border-style:solid;
      border-width:12px;
      }

      .quote:after,.quote2:after,.quote3:after,.quote4:after {
      content:"";
      width:0;
      height:0;
      position:absolute;
      bottom:100%;
      right:405px;
      border-color:transparent transparent #EEE;
      border-style:solid;
      border-width:7px;
      }

      Delete
    2. waduh lupa ga ke bales. mkasih mas sudah membantu. tapi beda sama yang mas topik, banyak cara lain juga to.

      Delete
    3. Pada dasarnya jQuery Accordion itu menggunakan prinsip kerja yang sama yaitu:

      .slideUp() .slideDown() atau .slideToggle()

      Yang membedakan hanyalah cara pemanggilannya saja, kalau punya mas taufik pemanggilannya menggunakan tambahan jQuery..... seperti
      .addclass()

      wkwkwkwk perbedaan bukan berarti ada jurang diantara kita, perbedaan membuat kita berwarna......... :D

      Delete
    4. beda algoritma kali yah. hahaha

      Delete
    5. Caranya cukup gunakan & lt; sebagai "<" dan & gt; sebagai ">". (Hapus whitespace diantara & dan lt; atau >)

      Delete
    6. Contohnya:

      & lt;body& gt;
      & lt;/body& gt;
      & lt;html& gt;
      & lt;/html& gt;
      & lt;script& gt;
      & lt;/script& gt;
      & lt;div class='aku'& gt;
      & lt;/div& gt;

      yang penting jangan lupa untuk menghapus whitespace diantara & dan lt; serta & dan gt;

      Delete
    7. oh gtu aja to, kirain gmana.haha
      mkasih banyak mas :)

      Delete