Jquery ile tıkladığında açılan toogle yapımı

Merhabalar sayın okurlarım.

Bu makalemizde Webmaster’ların, tema yapımcılarının ve bir çok konuda çalışan insanların kullandığı Jquery ile Toogle fonksiyonu ile yapılan tıklandığında açılan div yapımını göstereceğim.

Belirlenen bir dive tıklandığında belirlenen bir div açılacak ve bu div çalışır hale gelirken basit bir animasyon olacak.

İlk olarak örnek Jquery Toogle uygulamamızın CSS kodlarını verelim.

<style>
.kare{width:125px;height:125px;border:1px solid #000;} .buton{width:125px; padding:5px; color:#000; border:1px solid #000;}
</style>

Şimdi de HTML kodlarımızı verelim.

<div class=”buton”>Açılır kutuyu aç!</div>
<br />
<div class=”kare”>
Açılır Kutu açıldı!
</div>

Son olarak da Javascript Jquery kodlarımızı verelim.

<script>$(document).ready(function() {
$('.kare').hide();
});
function acilir() {
$('.kare').slideToggle(1000);
}
</script>

Css kodlarımız çok basit anlayacağınızı umuyorum. HTML kodlarımızda basit bir şekilde CSS kodlarımızdan alınan stiller ile basit bir buton ve kutu oluşturduk. Tek dikkat etmemiz gereken buton sınıfına eklediğimiz onclick=”acilir” komutu. Bu komut ile acilir adlı jquery fonksiyonunu çektik.

Jquery kodlarımızda, kare adlı sınıfı gizledik. Ve acilir adlı fonksiyonda bu sınıfı animasyonlu olarak açılması için slideToogle komutunu kullandık.

Kodları inceleyip kendiniz fonksiyonu değiştirebilirsiniz.

Demoyu Gör