How to show Div in next and back button ? [Resolved]

Posted by Akiii under jQuery on 10/24/2011 | Points: 10 | Views : 5764 | Status : [Member] | Replies : 3
Hi folks,
I am having some problem to show and hide div using jquery.
(1) I have 3 div - div1,div2 and div3
(2) when div1 next button is clicked, div2 is shown but div1 and div3 is made to hide
(3) when div2 next button is clicked, div3 is shown but div1 and div2 is made to hide

Similar thing goes for the back button. I have accomplished this by using show() and hide() function in jquery but i want to use array and do that. Because if there are huge number of divs then i cannot write show and hide.......

Any help is appreciated regarding the above scenario !

Thanks and Regards
Akiii




Responses

Posted by: Abdulhaknet on: 10/25/2011 [Member] Starter | Points: 50

Up
0
Down

Resolved
hi friend,

i got your query. i have a sample html file which can navigate the div tabs with next and previous buttons.
Please go through the code and check once.

---------------------------------------------------------------------------------------
<html>
<head>
<title></title>
<SCRIPT type="text/javascript">
function toggleDiv(divId) {
for (var i = 1; i < 4; i++)
{
var tempDivId = "news" + i;
document.getElementById(tempDivId).style.display = 'none';
}
document.getElementById(divId).style.display = 'block';
return false;
}
</SCRIPT>
</head>
<body>
<center>
<DIV ID="news1" style="background:#00FF99;border:1px solid #00FF99;height:auto;width:300px;">
<TABLE style='color:black;width:300px;'>
<tr >
<td colspan=2 style="background:#FFFFFF;"><center><b>This is DIV1</b></center>
</tr>
<tr>
<td>
<td><input type=button id=btnnext1 value="NextDiv1" onclick="toggleDiv('news2');">
</tr>
</table>
</div>
<DIV ID="news2" style="background:#FF9900;display:none;border:1px solid #FF9900;height:auto;width:300px;">
<TABLE style='color:black;width:300px;'>
<tr >
<td colspan=2 style="background:#FFFFFF;"><center><b>This is DIV2</b></center>
</tr>
<tr>
<td><input type=button id=btnpre2 value="PreDiv2" onclick="toggleDiv('news1');">
<td><input type=button id=btnnext2 value="NextDiv2" onclick="toggleDiv('news3');">
</tr>
</table>
</div>
<DIV ID="news3" style="background:#CC9900;display:none;border:1px solid #CC9900;height:auto;width:300px;">
<TABLE style='color:black;width:300px;'>
<tr >
<td colspan=2 style="background:#FFFFFF;"><center><b>This is DIV3</b></center>
</tr>
<tr>
<td><input type=button id=btnpre3 value="PreDiv3" onclick="toggleDiv('news2');">
<td>
</tr>
</table>
</div>
</center>
</body>
</html>

---------------------------------------------------------------------------------------
Regards,
Abdul Hak.

Akiii, if this helps please login to Mark As Answer. | Alert Moderator

Posted by: Akiii on: 10/25/2011 [Member] Bronze | Points: 25

Up
0
Down
Hi Abdul,
your code is working fine....
thank you very much for your help...

Please note:- There are some td missing.

I mark yours as an answer !

Regards
Akiii

Akiii, if this helps please login to Mark As Answer. | Alert Moderator

Posted by: Annawatson on: 10/25/2011 [Member] Starter | Points: 25

Up
0
Down
Hey Abdul,

Your coding is working fine. Thanks for this useful help.


Gateway Laptop Repair

Akiii, if this helps please login to Mark As Answer. | Alert Moderator

Login to post response