Sabtu, 03 September 2011

Membuat efek toogle accordion keren



Gimana sih bentuk Toogle accordion itu..? tenang aku udah siapin demonya dan ini bukan togel judi loh heheheh memang ya ada - ada aja orang luar tuh kasi nama kok Toogle hehehe dari pada penasaran langsung saja lihat demonya.

DEMO

Jadi gitu kontennya akan kelihatan saat judul konten di klik hemmm menurutQ itu sangat keren namanya orang awam ya gini semua di bilang keren hehehe dan kode ini pun gampang di simpan anda hanya tinggal Menambahkan Gadget HTML/Javascript Caranya baca Disini dan masukan kodenya di bawah ini.

<div id="toggle-container">
<h2>Klik konten 1</h2>
<div class="toggle-content">
Disini letakan kode html atau javscript atau teks juga bisa
</div>
<h2>Klik konten 2</h2>
<div class="toggle-content">
Disini letakan kode html atau javscript atau teks juga bisa
</div>
<h2>Klik konten 3</h2>
<div class="toggle-content">
Kembali ke tutorial
</div>
</div>
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js' type='text/javascript'></script>
<script type="text/javascript">
$(document).ready(function(){
$(".toggle-content").hide();
$("#toggle-container>h2").click(function(){
$(this).toggleClass("active").next().slideToggle("fast");
});
});
</script>
<style>
#toggle-container {
    text-align: left;
    width: 400px;
    margin: 0 auto;
    background: #EEE;
    padding: 5px;
    border: 3px solid #daa;
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
    border-radius: 5px;
    -moz-box-shadow: 0 0 3px 2px #555;
    -webkit-box-shadow: 0 0 3px 2px #555;
    box-shadow: 0 0 3px 2px #555
    }

#toggle-container h2 {
    border: 3px solid #888;
    text-align: center;
    padding: 5px;
    font: bold 20px/20px Arial, sans-serif;
    text-transform: uppercase;
    background: #ddd;
    margin: 10px auto;
    cursor: pointer;
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
    border-radius: 5px;
    color: #776E6E
    }

#toggle-container h2.active {
    background: #B1D5E9
    }

.toggle-content {
    background: #C7C7C7;
    margin: 5px auto;
    padding: 10px;
    font: normal 13px/20px Arial, sans-serif
    }
</style>

Lalu klik SIMPAN. width: 400px; adalah lebarnya silahkan sesuaikan sendiri ya.