[JS]Açılır Kapanır Kutular Yapmak



Untitled Document




Jquery ile açılır kapanır kutular yapma çokta zor bi iş değildir.
İsterseniz başlayalım derse,
önce herzamanki gibi kütüphanemizi bağladıktan sonra HTML kodumuzu yazmaya başlayalım;

<a id="pencereac" href="#"><p id="p" style="">Birinci Kutuyu Aç</p></a>
<div id="pencere" style="height:40px; width:400px; border:1px solid green; display:none; background-color:green; color:#FFF; margin-left:0; ">
<p style="margin-top:8px; text-align:center;"><a id="pencereac2" href="#">2.Kutuyu Açıp 1.Kutuyu Kapat</a></p>
</div>
<div id="pencere2" style="border:1px solid red; background-color:red; height:40px; width:400px; display:none;"><p style="margin-top:8px; text-align:center;"><a href="#">linki ve 2.kutuyu kapat 1.kutuyu aç</a></p></div>
bu şekilde bir link  ve 3 tanede div yani kutu oluşturduk.
burdan geçelim JS kodlarına;

<script type="text/javascript">
$(document).ready(function(){
$('a#pencereac').click(function(){
$('div#pencere').toggle('normal');
})
$('div#pencere').click(function(){
$('div#pencere2').toggle('normal');
})
$('div#pencere2').click(function(){
$('div#pencere2').toggle('slow');
$('p#p').toggle('normal');
$('div#pencere').toggle('fast');
})
$('div#pencere').click(function(){
$('div#pencere').toggle('normal');

})
});
</script>
CSS'in içinede bunları koyarsak görünüm daha güzel olucaktır
a{color:white;} body{background-color:#868686;} 
Kodlar bukadar.Oyunda başarılar bu arada :)

Sonuç:







Mehmethan Yüksel