Log in

View Full Version : One content Div should serve multiple tabs !


hasankaz
04-23-2008, 08:59 AM
Hi everyone,
Can anyone help me amending this script Example 2 at http://www.dynamicdrive.com/dynamicindex17/animatedcollapse.htm I've change it a bit but contents are loading under each other they should load at same place, here is the code




<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

<script type="text/javascript" src="animatedcollapse.js">

/***********************************************
* Animated Collapsible DIV- © Dynamic Drive DHTML code library (www.dynamicdrive.com)
* This notice MUST stay intact for legal use
* Visit Dynamic Drive at http://www.dynamicdrive.com/ for this script and 100s more
***********************************************/

</script>




<a href="javascript:collapse1.slideit()">Tab 1</a>

<a href="javascript:collapse2.slideit()">Tab 2</a>




<div id="cat" style="width: 917px; background-color: #99E0FB;">

<!--Your DIV content as follows. Note to add CSS padding or margins, do it inside a DIV within the Collapsible DIV -->
<div style="padding: 0 5px">
<h3>Content inside DIV!</h3>
<h3>Content inside DIV!</h3>
<h4>Note: No CSS height attribute defined. Persistence enabled.</h4>
</div>

</div>

<script type="text/javascript">

//Syntax: var uniquevar=new animatedcollapse("DIV_id", animatetime_milisec, enablepersist(true/fase), [initialstate] )
var collapse1=new animatedcollapse("cat", 800, true)

</script>







<div id="cat2" style="width: 917px; background-color: #99E0FB;">

<!--Your DIV content as follows. Note to add CSS padding or margins, do it inside a DIV within the Collapsible DIV -->
<div style="padding: 0 5px">
<h3>Content inside DIV!</h3>
<h3>Content inside DIV!</h3>
<h4>Note: No CSS height attribute defined. Persistence enabled.</h4>
</div>

</div>

<script type="text/javascript">

//Syntax: var uniquevar=new animatedcollapse("DIV_id", animatetime_milisec, enablepersist(true/fase), [initialstate] )
var collapse2=new animatedcollapse("cat2", 800, true)

</script>
hasankaz
04-23-2008, 03:05 PM
Can anyone help plzzzzzzzzzzz.............. :(
ddadmin
04-23-2008, 08:17 PM
If I understand what you're trying to do correctly, one way is to hide the other content DIV (ie: cat2) when cat is being animated, and the reverse. Try adding the below to your two toggle links:


<a href="javascript:collapse1.slideit()" onClick="showhide('cat', 'cat2')">Tab 1</a>

<a href="javascript:collapse2.slideit()" onClick="showhide('cat2', 'cat')">Tab 2</a>

And also, add the below script to your page to do the show/hide of the other DIV:


<script type="text/javascript">
function showhide(div1, div2){
document.getElementById(div1).style.display="block"
document.getElementById(div2).style.display="none"
}
</script>
hasankaz
04-24-2008, 08:20 AM
Great! Its done most of the job but some little inconsistency issues arise which I will try to dig in and fix like all the div must be close as page load, and Ideally I was looking one div to be collapse and expand and just contents will replace by clicking on tab 2, anyhow I will do some work and see how far I can customise it though I am not a programmer but its always good to learn new things :) thanks alot for your help and all those who read my post to help, I will ask more and more from you guys cause I believe "Question is the first step towards learning"