Jquery ile Açılır Kapanır Menü veya Yazı

Menü Butonları

<a href="#" class="expand">Expand All</a>
<a href="#" class="collapse">Collapse All</a>



Menüyü açılır yapmak için gereken jquery açma kodu

$('.collapse').click(function(){
$(".collapse").hide();
$("li").last().hide("slow", function fnCollapse() {
$(this).prev("li").hide("slow", fnCollapse);
if(!$(this).prev("li").length)
	$(".expand").show();
});
});

Menüyü Kapatmak için Gerekli Jquery Kodları

$(".expand").hide();
$('.expand').click(function(){
$(".expand").hide();
$("li").first().show('slow',function fnExpand() {
$(this).next("li").show("slow", fnExpand);
if(!$(this).next("li").length)
$(".collapse").show();
});
}); 


 

HTML Kodlarıda Aşağıdaki gibi olacaktır.



<html>
<head>
<link href="styles.css" rel="stylesheet" type="text/css">
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script src="jquery.showhide.js"></script>
</head>
<body>
<table width="500px" cellpadding="10" cellspacing="10" border="0" class="tblShowHide">
<tr>
<td valign="top">
<div>
<span>Programmes</span>
<a href="#" class="expand">Expand All</a>
<a href="#" class="collapse">Collapse All</a>
</div> 
<ul>
<li>News</li>
<li>Knowledge</li>
<li>Religion</li>
<li>Entertainment</li>
<li>Movies</li>
<li>Music</li>
<li>Comedy</li>
</ul>
</td>
</tr>
</table>
</body>
</html>


Gerekli tüm dosyaları Bu Linkten İndirebilirsiniz.