Multiple tab content boxes

**kafi** · 10-12-2007, 02:14 PM

1) Script Title: Tab Content Script (v 2.0)

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

3) Describe problem:
I wish to set up multiple content boxes with tab content script.
I have just cloned first content box.
It works OK in FF but doesnt in IE

Can anybody advise how to set up more content boxes on one page?

Here is what I tried:

HTML Code:

<!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=iso-8859-1" />
<title>Untitled Document</title>
<link rel="stylesheet" type="text/css" href="tabcontent.css" />

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

/***********************************************
* Tab Content script v2.0- © 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 full source code
***********************************************/

</script>
</head>

<body>

<ul id="countrytabs" class="shadetabs">
<li><a href="#" rel="country1" class="selected">Tab 1</a></li>
<li><a href="#" rel="country2">Tab 2</a></li>
<li><a href="#" rel="country3">Tab 3</a></li>
<li><a href="#" rel="country4">Tab 4</a></li>
<li><a href="http://drak.porada.com">DRAK</a></li>
</ul>

<div style="border:1px solid gray; width:450px; margin-bottom: 1em; padding: 10px">

<div id="country1" class="tabcontent">
Tab content 1 here<br />Tab content 1 here<br />
</div>

<div id="country2" class="tabcontent">
Tab content 2 here<br />Tab content 2 here<br />
</div>

<div id="country3" class="tabcontent">
Tab content 3 here<br />Tab content 3 here<br />
</div>

<div id="country4" class="tabcontent">
Tab content 4 here<br />Tab content 4 here<br />
</div>

</div>
<script type="text/javascript">

var countries=new ddtabcontent("countrytabs")
countries.setpersist(true)
countries.setselectedClassTarget("link") //"link" or "linkparent"
countries.init()

</script>









<ul id="countrytabs" class="shadetabs">
<li><a href="#" rel="country5" class="selected">Tab 5</a></li>
<li><a href="#" rel="country6">Tab 6</a></li>
<li><a href="#" rel="country7">Tab 3</a></li>
<li><a href="#" rel="country8">Tab 4</a></li>
<li><a href="http://drak.porada.com">DRAK</a></li>
</ul>

<div style="border:1px solid gray; width:450px; margin-bottom: 1em; padding: 10px">

<div id="country5" class="tabcontent">
Tab content 1 here<br />Tab content 1 here<br />
</div>

<div id="country6" class="tabcontent">
Tab content 2 here<br />Tab content 2 here<br />
</div>

<div id="country7" class="tabcontent">
Tab content 3 here<br />Tab content 3 here<br />
</div>

<div id="country8" class="tabcontent">
Tab content 4 here<br />Tab content 4 here<br />
</div>

</div>

<script type="text/javascript">

var countries=new ddtabcontent("countrytabs")
countries.setpersist(true)
countries.setselectedClassTarget("link") //"link" or "linkparent"
countries.init()

</script>
</body>
</html>

**ddadmin** · 10-12-2007, 09:24 PM

The variable "countries" needs to be a unique variable name for each instance of Tab Content you call on the page. Please see the code in the demo that you cut and paste- all 3 examples contain unique variable names.

**kafi** · 10-13-2007, 12:34 PM

ohh, I see, I was only changing numbers

Many thanks!!! ddadmin

Thread: Multiple tab content boxes

Thread Tools

Search Thread

Multiple tab content boxes

Bookmarks

Bookmarks

Posting Permissions