বৃহস্পতিবার, ২ মে, ২০১৩
<html lang="en">
<head>
<meta charset="utf-8" />
<title>jQuery UI Accordion - Default functionality</title>
<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.2/themes/smoothness/jquery-ui.css" />
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script src="http://code.jquery.com/ui/1.10.2/jquery-ui.js"></script>
<style type="text/css">
body {font-family:Arial;}
h2 {font-size:1.6em;}
.newsItem {
border:solid 1px red;
padding:10px;
}
.newsTeaser{
border:solid 5px green;
padding:10px;
}
.collapsible{
display:none;
border:solid 5px blue;
padding:10px;
}
.more {cursor:pointer;}
</style>
<script>
$(document).ready(function() {
$(".more").click(function() {
$(".collapsible").hide();
$(this).parent().parent().find(".collapsible").show();
});
});
</script>
</head>
<body>
<?php
for($i=1;$i<=3;$i++){
$demo='
<div>
<h2>Title</h2>
<div id="newsTeaser">
<button class="btn more">more</button>
</div>
<div style="clear:both;"></div>
<div class="btn collapsible" style="display:none;">
<table>
<p>Full body goes here...Full body goes here...Full body goes here...Full body goes here...Full body goes here...Full body goes here...Full body goes here...Full body goes here...Full body goes here...Full body goes here...Full body goes here...Full body goes here...Full body goes here...Full body goes here...Full body goes here...Full body goes here...Full body goes here...Full body goes here...</p>
<p class="less">less</p>
</table>
</div>
</div>
';
echo $demo;
}
?>
</body>
</html>
এতে সদস্যতা:
মন্তব্যগুলি পোস্ট করুন (Atom)
কোন মন্তব্য নেই:
একটি মন্তব্য পোস্ট করুন