Prasad Bolla's SharePoint Blog

Click Here to go through the Interesting posts within my Blog.

Click Here to go through the new posts in my blog.

Thursday, March 29, 2012

JQuery sample to Show & Hide Divs

<html>

<head>
<meta http-equiv="Content-Language" content="en-us" />
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Apple</title>
<script language="javascript" type="text/javascript" src="jquery-1.4.2.min.js"></script>
<script language="javascript" type="text/javascript">
$(document).ready(function(){
$("#btnAlphabets").click(function(){
$("#divAlphabets").show();
$("#divNumbers").hide();
});
$("#btnNumbers").click(function(){
$("#divAlphabets").hide();
$("#divNumbers").show();
});
});
</script>
</head>

<body>
<div id="divAlphabets">
<table width="100%" cellpadding="0" cellspacing="0">
<tr>
<td>Apple</td>
</tr>
<tr>
<td>Boy</td>
</tr>
<tr>
<td>Cat</td>
</tr>
<tr>
<td>Dog</td>
</tr>
<tr>
<td>Elephant</td>
</tr>
<tr>
<td>Fan</td>
</tr>
<tr>
<td>Gun</td>
</tr>
<tr>
<td>Hut</td>
</tr>
<tr>
<td>Ink</td>
</tr>
<tr>
<td>Kite</td>
</tr>
<tr>
<td>Lamp</td>
</tr>
<tr>
<td>Monkey</td>
</tr>
<tr>
<td>Nose</td>
</tr>
<tr>
<td>Owl</td>
</tr>
<tr>
<td>Pen</td>
</tr>
<tr>
<td>Queen</td>
</tr>
<tr>
<td>Rat</td>
</tr>
<tr>
<td>Sun</td>
</tr>
<tr>
<td>Tree</td>
</tr>
<tr>
<td>Umbrella</td>
</tr>
<tr>
<td>Van</td>
</tr>
<tr>
<td>Watch</td>
</tr>
<tr>
<td>X-Ray</td>
</tr>
<tr>
<td>Yacht</td>
</tr>
<tr>
<td>Zebra</td>
</tr>
</table>
</div>
<div id="divNumbers" style="display:none;">
<table>
<tr>
<td>1</td>
</tr>
<tr>
<td>2</td>
</tr>
<tr>
<td>3</td>
</tr>
<tr>
<td>4</td>
</tr>
<tr>
<td>5</td>
</tr>
<tr>
<td>6</td>
</tr>
<tr>
<td>7</td>
</tr>
<tr>
<td>8</td>
</tr>
<tr>
<td>9</td>
</tr>
<tr>
<td>10</td>
</tr>
<tr>
<td>11</td>
</tr>
<tr>
<td>12</td>
</tr>
<tr>
<td>13</td>
</tr>
<tr>
<td>14</td>
</tr>
<tr>
<td>15</td>
</tr>
<tr>
<td>16</td>
</tr>
<tr>
<td>17</td>
</tr>
<tr>
<td>18</td>
</tr>
<tr>
<td>19</td>
</tr>
<tr>
<td>20</td>
</tr>
<tr>
<td>21</td>
</tr>
<tr>
<td>22</td>
</tr>
<tr>
<td>23</td>
</tr>
<tr>
<td>24</td>
</tr>
<tr>
<td>25</td>
</tr>
</table>

</div>
<div>
<table><tr><td><input type="button" id="btnAlphabets" value="Show Alphabets" /></td><td><input type="button" id="btnNumbers" value="Show Numbers" /></td></tr></table>
</div>
</body>

</html>

No comments:

Post a Comment