Expandable text with Javascript, One text region at a time Options

[mkenz125]

I am using expandable text regions on this webpage and I am trying to figure out how to make only one of the regions visible at a time (the previous ones disappear when another one is clicked). Does anyone know what I need to do to make this happen? Here is the page: http://www.thepioneers.tv/episode.html

I also have the abbreviated code right here.

CODE

<div class="text" id="testtext1">
<div align="center">
<div onClick="openClose('a1')" style="cursor:hand; cursor:pointer"><a href="#" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Image7','','Media/episodebutt/welcome.png',1)"><img src="Media/episodebutt/welcomey.png" name="Image7" width="400" height="30" border="0" id="Image7" /></a></div>
<div id="a1" class="texter">
BLAH BLAH TEXT.<br /><br />
</div>
<br />

(a2...a7)

<div onClick="openClose('a8')" style="cursor:hand; cursor:pointer"><a href="#" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Image14','','Media/Episodebutt/fall.png',1)"><img src="Media/Episodebutt/fally.png" name="Image14" width="420" height="30" border="0" id="Image14" /></a></div>
<div id="a8" class="texter">
BLAH BLAH TEXT.<br /><br />
</div>
<br /><br />
</div>

This post has been edited by mkenz125: Jan 21 2013, 03:05 PM

[Christian J]

Basically you need to loop through all expandable elements and close those that are open. Here's one version: http://forums.htmlhelp.com/index.php?s=&am...ost&p=43934

[mkenz125]

How can I align this in the center?

[Christian J]

How can I align this in the center?

The CSS auto margins that you use on http://www.thepioneers.tv/episode.html should work.