PDA

View Full Version : Expand tabbed content and arbritrary divs when a tab is selected



veiga
11-21-2011, 11:24 PM
1) Script Title: Demo #2- Different Tab Style, expanding of arbitrary DIVs on the page enabled

2) Script URL (on DD): http://www.dynamicdrive.com/dynamicindex17/tabcontent.htm

3) Describe problem:

I'm trying to expand tabbed content and at the same time expand 4 arbitrary divs when a tab is clicked or a drop down option is selected. It seems not possible to expand simultaneously more than 2 arbitrary divs.

I defined arbitrary divs on left, right, top and bottom of the page. Only the first two is expanded. How to solve this limitation?

Live demo is here:
http://www.celestinoveiga.com/testing/menu2/menu2.php.

The modified script is here:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<!--cv - original .js here: http://www.dynamicdrive.com/dynamicindex17/tabcontent/tabcontent.js -->

<!--cv - original .css here: http://www.dynamicdrive.com/dynamicindex17/tabcontent/tabcontent.css -->

<link rel="stylesheet" type="text/css" href="tabcontent.css" />

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

<body style="text-align:center">

<div style="width:920px; background-color:#F00; margin:0 auto; padding:4px">

<div id="flowertabs_top" style="margin:0 auto; width:920px; background-color:#CFC;">
<div id="top_flowernote1" style="width:900px; height:100px">
top_flowernote1
</div>

<div id="top_flowernote2" style="width:900px; height:100px">
top_flowernote2
</div>

<div id="top_flowernote3" style="width:900px; height:100px">
top_flowernote3
</div></div>

<div id="flowertabs_left" style="width:140px; background-color:#CFC; float:left; margin:2px">

<div id="left_flowernote1" style="width:100px; height:200px">
left_flowernote1
</div>

<div id="left_flowernote2" style="width:100px; height:200px">
left_flowernote2
</div>

<div id="left_flowernote3" style="width:100px; height:200px">
left_flowernote3
</div></div>

<div style="margin:2px auto; padding-bottom:5px; background-color: #999; width:620px; display:inline-block">
<select onChange="countries.expandit(this.selectedIndex)" style="width:124px; background-color:#9FC; text-align:center">
<option selected="selected">Tab1</option>
<option>Tab2</option>

<option>Tab3</option>
</select>

<ul id="countrytabs" class="shadetabs" style="overflow:hidden; width:600px; height:5px; background-color:#F00; margin:0 auto; visibility:hidden">
<li><a href="#" rel="country1" rev="left_flowernote1, right_flowernote1, top_flowernote1, bottom_flowernote1" >1</a></li>
<li><a href="#" rel="country2" rev="left_flowernote2, right_flowernote2, top_flowernote2, bottom_flowernote2">2</a></li>
<li><a href="#" rel="country3" rev="left_flowernote3, right_flowernote3, top_flowernote3, bottom_flowernote3">3</a></li>
</ul>

<div style="border:1px solid gray; width:600px; margin:10px auto; margin-bottom:0px; padding: 5px; background-color:#F00">

<div id="country1" class="tabcontent" style="background-color:#FF3">

Tab content 1 here<br />Tab content 1 here<br />
</div>

<div id="country2" class="tabcontent" style="background-color:#9C0">
Tab content 2 here<br />Tab content 2 here<br />
</div>

<div id="country3" class="tabcontent" style="background-color:#9CF">
Tab content 3 here<br />Tab content 3 here<br />

</div>

</div>


<!--<p><b><a href="javascript: myflowers.expandit(0)">Clica para selecionar tab0</a></b></p>

<p><b><a href="javascript: myflowers.expandit(1)">Clica para selecionar tab1</a></b></p>

<p><b><a href="javascript: myflowers.expandit(2)">Clica para selecionar tab2</a></b></p> -->
</div>

<div id="flowertabs_right" style="width:140px; background-color:#CFC; float:right; margin:2px">
<div id="right_flowernote1" style="width:100px; height:200px">
right_flowernote1
</div>

<div id="right_flowernote2" style="width:100px; height:200px">
right_flowernote2
</div>

<div id="right_flowernote3" style="width:100px; height:200px">
right_flowernote3
</div></div>



<div style="margin:0 auto; width:920px; background-color:#CFC; clear:both">
<div id="bottom_flowernote1" style="width:900px; height:100px">
bottom_flowernote1
</div>

<div id="bottom_flowernote2" style="width:900px; height:100px">
bottom_flowernote2
</div>

<div id="bottom_flowernote3" style="width:900px; height:100px">
bottom_flowernote3
</div></div>

<script typ id="flowertabs_bottom"e="text/javascript">
var countries=new ddtabcontent("countrytabs")
countries.setpersist(true)
countries.setselectedClassTarget("link") //"link" or "linkparent"
countries.init()
</script>


<script type="text/javascript">
var myflowers_left=new ddtabcontent("flowertabs_left")
myflowers_left.setpersist(true)
myflowers_left.setselectedClassTarget("link") //"link" or "linkparent"
myflowers_left.init()
</script>

<script type="text/javascript">
var myflowers_right=new ddtabcontent("flowertabs_right")
myflowers_right.setpersist(true)
myflowers_right.setselectedClassTarget("link") //"link" or "linkparent"
myflowers_right.init()
</script>

<script type="text/javascript">
var myflowers_top=new ddtabcontent("flowertabs_top")
myflowers_top.setpersist(true)
myflowers_top.setselectedClassTarget("link") //"link" or "linkparent"
myflowers_top.init()
</script>

<script type="text/javascript">
var myflowers_bottom=new ddtabcontent("flowertabs_bottom")
myflowers_bottom.setpersist(true)
myflowers_bottom.setselectedClassTarget("link") //"link" or "linkparent"
myflowers_bottom.init()
</script>
</div>
</body>
</html>


Thanks in advances.

Celestino