By declaring it in the global scope to begin with:
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>Plan de Match Communication </title>
<meta name="description" content="Publicité, marketing, claude lussier, mise en marché, radio, tv, affaires, stratégie" />
<meta name="keywords" content="Agence de publicité et stratégie marketing, " />
<meta name="author" content="" />
<base href="http://www.plandematchcommunication.com/temporaire/" />
<link href="favicon.ico" rel="icon" type="image/x-icon" />
<meta name="verify-v1" content="0rm0MfCF41YR034RbIX397YRnP1yBjNZ/cG0NwfliKU=" />
<!-- CSS -->
<link rel="stylesheet" type="text/css" href="css/reset.css">
<link rel="stylesheet" type="text/css" href="css/plandematchcommunication.css">
<script type="text/javascript" src="includes/prototype.js"></script>
<script type="text/javascript" src="includes/scriptaculous.js"></script>
<script type="text/javascript" src="includes/effects.js"></script>
<link rel="stylesheet" type="text/css" href="css/accordion.css" />
<script type="text/javascript" src="includes/accordion.js"></script>
<script type="text/javascript">
//
// In my case I want to load them onload, this is how you do it!
//
Event.observe(window, 'load', loadAccordions, false);
//
// Set up all accordions
//
var bottomAccordion;
function loadAccordions() {
bottomAccordion = new accordion('vertical_container');
}
function openMe(ThisPanel) {
bottomAccordion.activate($$('#vertical_container .accordion_toggle')[ThisPanel]);
return false;
}
</script>
<link rel="stylesheet" type="text/css" href="css/lightwindow.css" />
<script type="text/javascript" src="includes/lightwindow.js"></script>
</head>
<body>
<div class="TEAMMain" id="TEAMSite">
<div class="TEAMHeader">
<a href="#"><img class="TEAM_logo" src="images/design/logo_plandematchcommunication.png" width="269" height="58" alt="Plan de Match Communication "></a>
</div> <!-- TEAMHeader -->
<div id="TEAMContent">
<div id="vertical_container" >
<div class="accordion_toggle"><h4 class="onglet1">Tab #1</h4></div>
<div class="accordion_content" style="background:url('images/design/contenu_back1.jpg') top left repeat-x #fbfbfc;">
<div style="margin:0 auto;width:960px;">
<p>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nulla non lorem sit amet augue mattis ornare. In porta, nisi sed iaculis pellentesque, arcu elit imperdiet libero, sed tincidunt risus ligula id ve
. . .
. . . ntum, mauris id ultrices commodo, sem turpis sodales mauris, a bibendum augue orci sit amet orci. Integer justo enim, viverra ut, dignissim elementum, porttitor in, felis.
</p>
</div>
</div>
</div> <!-- vertical_container -->
<div class="TEAM_footer">
<table width="100%" border="0">
<tr>
<td valign="top">
<p class="TEAM_Menu"><a href="#" onclick="return openMe(0);">Toggle Tab #1</a> | </p>
<p class="TEAM_Menu"><a href="#" onclick="return openMe(1);">Toggle Tab #2</a> | </p>
<p class="TEAM_Menu"><a href="#" onclick="return openMe(2);">Toggle Tab #3</a></p>
</td>
<td valign="top" align="right">
</td>
</tr>
</table>
</div> <!-- TEAM_footer -->
</div> <!-- TEAMContent -->
</div> <!-- TEAMMain -->
</body>
</html>
Notes: I made some other changes in your code, returning (false) onclick of the 'external toggles', for example. Mid section of page unchanged, removed in the above for brevity.
Bookmarks