showhide

0
323

<!DOCTYPE HTML>
<html>
<head>
<script type=”text/javascript” src=”http://code.jquery.com/jquery-1.8.3.min.js”></script>
<style>
.dn{display:none;}
.fl{float:left;}
.cb{clear:both;}
.m5{margin:5px;}
.btn_link{color:#f00;font-weight:bold;}
</style>
</head>
<body>
<?php
$show_limit = 20;
for($i=1;$i<=40;$i++)
{
?>
<div class=”footer_links <?php echo $i>$show_limit ? ‘ dn’ : ”;?>”>
<?php
for($j=1;$j<=4;$j++)
{
?>
<div class=”fl m5″>Section-<?php echo $i;?>-Text<?php echo $j;?></div>
<?php
}
?>
<div class=”cb”></div>
</div>
<?php
}
?>
<div class=”dn more_opt”><a href=”#” class=”btn_link”>Show More</a></div>
<script type=”text/javascript”>
jQuery(document).ready(function(){
//$(‘.footer_links:gt(<?php echo $show_limit-1;?>)’).addClass(‘dn’);
var total_footer_container = $(‘.footer_links’).length;
var total_show_limit = <?php echo $show_limit;?>;
if(total_footer_container > total_show_limit){
$(‘.more_opt’).find(‘.btn_link’).addClass(‘more’).end().show();
}
$(‘.btn_link’).click(function(e){
e.preventDefault();
var lobj = $(this);
lobj.hide();
if(lobj.hasClass(‘more’)){
$(‘.footer_links:gt(‘+total_show_limit+’)’).slideDown(700,function(){lobj.toggleClass(‘more’).html(‘Show Less’).show();});
}else{
$(‘.footer_links:gt(‘+total_show_limit+’)’).slideUp(700,function(){lobj.toggleClass(‘more’).html(‘Show More’).show();});
}
});
});

</script>
</body>
</html>