my code

Snippet options

Download: Download snippet as demohtm.html.
Copy snippet: For this you need a free my code account.
Embed code : You will find the embed code for this snippet at the end of the page, if you want to embed it into a website or a blog!

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "">
<html xmlns="" xml:lang="en">

<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />

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

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

* Ajax Tabs Content script v2.2- © Dynamic Drive DHTML code library (
* This notice MUST stay intact for legal use
* Visit Dynamic Drive at for full source code




<h3><a href="">Ajax Tabs Content script Instructions</a></h3>

<h3>Demo #1- Basic implementation</h3>

- First tab shows default, inline content directly added inside container DIV<br />
- 2nd and 3rd tabs show external pages fetched via <b>Ajax</b><br />
- 4th tab shows an external page fetched via <b>IFRAME</b><br />

<ul id="countrytabs" class="shadetabs">
<li><a href="#" rel="#default" class="selected">Tab 1</a></li>
<li><a href="external2.htm" rel="countrycontainer">Tab 2</a></li>
<li><a href="external3.htm" rel="countrycontainer">Tab 3</a></li>
<li><a href="external4.htm" rel="#iframe">Tab 4</a></li>
<li><a href="">Dynamic Drive</a></li>

<div id="countrydivcontainer" style="border:1px solid gray; width:450px; margin-bottom: 1em; padding: 10px">
<p>This is some default tab content, embedded directly inside this space and not via Ajax. It can be shown when no tabs are automatically selected, or associated with a certain tab, in this case, the first tab.</p>

<script type="text/javascript">

var countries=new ddajaxtabs("countrytabs", "countrydivcontainer")
countries.setselectedClassTarget("link") //"link" or "linkparent"


<p><a href="javascript: countries.expandit(3)">Dynamically select last Tab</a> | <a href="demo.htm?countrytabs=1">Reload page and select 2nd tab using URL parameter</a></p>

<hr />

<h3>Demo #2- Expanding of arbitrary DIVs on the page enabled</h3>

- All tabs fetched via <b>Ajax</b><br />
- 2nd and 4th tabs also show/hide arbitrary DIVs when clicked on<br />

<div id="flowernote" style="display:none; position:absolute; right: 30px; width:150px; height:150px; background-color:red; color:white">
Arbitrary DIV 1

<div id="flowernote2" style="display:none; position:absolute; right: 200px; width:80px; height:80px; background-color:black; color:white">
Arbitrary DIV 2

<div id="flowernote3" style="display:none; position:absolute; right: 30px; width:140px; height:140px; background-color:navy; color:white">
Arbitrary DIV 3

<div id="flowerdivcontainer" style="border:1px solid gray; width:350px; height: 200px; background-color: lightyellow; padding: 5px">

<div id="flowertabs" class="modernbricksmenu2">
<li><a href="external1.htm" rel="flowerdivcontainer" class="selected">Tab 1</a></li>
<li><a href="external2.htm" rel="flowerdivcontainer" rev="flowernote,flowernote2">Tab 2</a></li>
<li><a href="external3.htm" rel="flowerdivcontainer">Tab 3</a></li>
<li><a href="external5.htm" rel="flowerdivcontainer" rev="flowernote3">Tab 4</a></li>
<li><a href="">Ajax Tabs script</a></li>
<br style="clear: left" />

<script type="text/javascript">

var myflowers=new ddajaxtabs("flowertabs", "flowerdivcontainer")
myflowers.setselectedClassTarget("link") //"link" or "linkparent"


<p><a href="javascript:myflowers.cycleit('prev')" style="margin-right: 250px; text-decoration:none">Back</a>  <a href="javascript:myflowers.cycleit('next')" style="text-decoration:none">Forward</a></p>

<p><a href="javascript: myflowers.loadajaxpage('external2.htm')">Load "external2.htm" into content container via Ajax</a></p>

<hr />

<h3>Demo #3- All contents fetched via "IFRAME"</h3>

<div id="pettabs" class="indentmenu">
<li><a href="external1.htm" rel="#iframe" class="selected">Tab 1</a></li>
<li><a href="external2.htm" rel="#iframe">Tab 2</a></li>
<li><a href="external3.htm" rel="#iframe">Tab 3</a></li>
<li><a href="external4.htm" rel="#iframe">Tab 4</a></li>
<br style="clear: left" />

<div id="petsdivcontainer" style="border:1px solid gray; width:550px; height: 150px; padding: 5px; margin-bottom:1em">

<script type="text/javascript">

var mypets=new ddajaxtabs("pettabs", "petsdivcontainer")


<p><a href="javascript: mypets.loadiframepage('')">Load "Google Homepage" into content container via IFRAME</a></p>


Create a free my code account now.

my code is a free service, which allows you to save and manage code snippes of any kind and programming language. We provide many advantages for your daily work with code-snippets, also for your teamwork. Give it a try!

Find out more and register now

You can customize the height of iFrame-Codes as needed! You can find more infos in our API Reference for iframe Embeds.