Efek Toggle Slide Sederhana dengan jQuery

Saturday, September 14, 2013

Pada prinsipnya membuat toggle slide, ada 2 elemen utama yang harus diterapkan. Yakni toggle trigger dan togglecontent, di dalam snippet ini toggle trigger yang Admin gunakan ialah tag <h2>, tentunya Anda bebas menentukan, dan untuk toggle content-nya ialah tag pertama setelah toggle trigger. Struktur sederhananya dapat dilihat pada gambar berikut:/

Membuat Efek Toggle Slide Sederhana dengan jQuery

Live Demo

Penerjemahan dalam dunia desaign blog bisa Anda ikuti tutorial ini

1code-line:1-12code-line:1-23code-line:1-34code-line:1-45code-line:1-56code-line:1-67code-line:1-78code-line:1-89code-line:1-910code-line:1-1011code-line:1-1112code-line:1-1213code-line:1-1314code-line:1-14<div id="toggle-container">
 <h2>Toggle Trigger 1</h2>
 <div class="toggle-content">
  Toggle content text comes here
    </div>
    <h2>Toggle Trigger 2</h2>
    <div class="toggle-content">
  Toggle content text comes here
    </div>
    <h2>Toggle Trigger 3</h2>
    <div class="toggle-content">
  Toggle content text comes here
    </div>
</div>

1code-line:2-12code-line:2-23code-line:2-34code-line:2-45code-line:2-56code-line:2-67code-line:2-78code-line:2-89code-line:2-910code-line:2-1011code-line:2-1112code-line:2-1213code-line:2-1314code-line:2-1415code-line:2-1516code-line:2-1617code-line:2-1718code-line:2-1819code-line:2-1920code-line:2-2021code-line:2-2122code-line:2-2223code-line:2-2324code-line:2-2425code-line:2-2526code-line:2-2627code-line:2-2728code-line:2-28#toggle-container {
  text-align:left;
  width:600px;
  margin:0 auto;
}

#toggle-container h2 {
  background:url("state-bg.png") no-repeat scroll 10px 7px #69697A;
  color:#fff;
  cursor:pointer;
  display:block;
  font:bold 24px Helvetica,Arial,sans-serif;
  height:24px;
  outline:0 none;
  margin:4px 0;
  padding:10px 10px 10px 50px;
}

#toggle-container h2.active {
  background:url("state-bg.png") no-repeat scroll 10px -73px #651261;
}

.toggle-content {
  background:#fff;
  border:1px solid #ccc;
  margin:5px 0;
  padding:10px;
}

1code-line:3-12code-line:3-23code-line:3-34code-line:3-45code-line:3-56code-line:3-67code-line:3-78code-line:3-89code-line:3-910code-line:3-1011code-line:3-1112code-line:3-12<script type="text/javascript" src="https://code.jquery.com/jquery-latest.js"></script>
<script type="text/javascript">
$(document).ready(function(){

 $(".toggle-content").hide(); //posisi awal konten toggle tidak ditampilkan, hapus baris ini jika konten akan ditampilkan sejak awal

 $("#toggle-container>h2").click(function(){
  $(this).toggleClass("active").next().slideToggle("fast");
 });

});
</script>

Untuk lebih jelasnya silakan lihat demonya dan download sourcenya. Terima kasih

Pasang Iklan Anda di Sini

Pasang Iklan Anda di Sini