how to re-initialize content chen re-using same container

[nath]

Hi,
I'm trying to use one same container to be opened from multiple links with different contents, but can't find a way to make it work.
I have one div container with multiple div's in it that have style display:none.
I have 3 links to open that container and activate a different series of div's for each link.
I use getExpander to check if expander is already open or not.
if open, I just change style to display block or none for the linked div's.
if not open, I open the espander, but if it was already opened once before, it opens again with the same div's on dispaly block then before, and I can't seem to figure out how to re-initialize this to have the wright div's displayed.

here is my header

Code: Select all

    hs.graphicsDir = '/art/highslide/graphics/';
    hs.outlineType = 'rounded-white';
    hs.outlineWhileAnimating = true;
    hs.preserveContent = false;

and here is my HTML

Code: Select all

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

 function clickTrainings(linkid,titreid,subtitleid,trainingid,menuid,hsid){
   DetectElementToHide('div','titre-',titreid); 
   DetectElementToHide('div','subtitle-',subtitleid); 
   DetectElementToHide('div','trainings-',trainingid); 
   DetectElementToHide('div','menu-',menuid);
   if(hs.getExpander()==null){
     return hs.htmlExpand(document.getElementById(linkid), {contentId:'imagotrainings'});
   } 
 }
</script>

<div id="PointerEpars"><a href="#" id="eparslink" onclick="clickTrainings('eparslink','titre-epars','subtitle-epars','trainings-intro-epars','menu-epars','imagotrainings');"><img src="images/transparent.png" alt="" width="100%" height="100%" border="0" /></a></div>
<div id="PointerPsy"><a href="#" id="psylink" onclick="clickTrainings('psylink','titre-psy','subtitle-psy','trainings-intro-psy','menu-psy','imagotrainings');"><img src="images/transparent.png" alt="" width="100%" height="100%" border="0" /></a></div>
<div id="PointerKnack"><a href="#" id="knacklink" onclick="clickTrainings('knacklink','titre-knack','subtitle-knack','trainings-intro-knack','menu-knack','imagotrainings');"><img src="images/transparent.png" alt="" width="100%" height="100%" border="0" /></a></div>
<!-- div highslide trainings  -->
<div class="highslide-html-content-training" id="imagotrainings">
<div class="highslide-header-training">
<ul>
<li class="highslide-move"><a href="/#" onclick="return false">D&eacute;placer</a></li>
<li class="highslide-close"><a href="/#" onclick="return hs.close(this)">Fermer</a></li>
</ul>	    
</div>
<div class="highslide-body">
<div class="highslide-contenu">

<div class="highslide-contenu-titre" id="titre-epars" style="display:none;"><font style="font-size:50px; font-style:italic;">e</font></div>
<div class="highslide-contenu-titre" id="titre-psy" style="display:none;"><font style="font-size:50px; font-style:italic;">chol</font></div>
<div class="highslide-contenu-titre" id="titre-knack" style="display:none;"><b>KN...</b>></div>
<div class="highslide-contenu-titre" id="titre-pan" style="display:none;"><font style="font-size:50px; font-style:italic;">th...</font></div>

<div class="highslide-contenu-sous-titre" id="subtitle-epars" style="display:none;">pr&eacute;s... psych</div>
<div class="highslide-contenu-sous-titre" id="subtitle-psy" style="display:none;">mod...</div>
<div class="highslide-contenu-sous-titre" id="subtitle-knack" style="display:none;">mod...</div>
<div class="highslide-contenu-sous-titre" id="subtitle-pan" style="display:none;">mod...</div>

<div class="highslide-contenu-texte">

<div id="trainings-intro-epars" style="display:none;"><font style="font-weight:bold;">s&eacute;min...</div>
<div id="trainings-intro-psy" style="display:none;"><font style="font-weight:bold;">psyc...</font><br/></div>
<div id="trainings-intro-knack" style="display:none;"><font style="font-weight:bold;">kn...</font><br/></div>
<div id="trainings-intro-pan" style="display:none;"><font style="font-weight:bold;">psych...</font><br/></div>

<div id="trainings-target-epars" style="display:none;"><font style="font-weight:bold;">s&eacute;minai...</div>
<div id="trainings-target-psy" style="display:none;"><font style="font-weight:bold;">mod...</font><br/></div>
<div id="trainings-target-knack" style="display:none;"><font style="font-weight:bold;">mod...</font><br/></div>
<div id="trainings-target-pan" style="display:none;"><font style="font-weight:bold;">mod...</font><br/></div>

<div id="trainings-cursus-epars" style="display:none;"><font style="font-weight:bold;">cursus ....</div>
<div id="trainings-cursus-psy" style="display:none;"><font style="font-weight:bold;">curs...</font><br/></div>
<div id="trainings-cursus-knack" style="display:none;"><font style="font-weight:bold;">curs...</font><br/></div>
<div id="trainings-cursus-pan" style="display:none;"><font style="font-weight:bold;">curs...</font><br/></div>

<div id="trainings-info-epars" style="display:none;"><font style="font-weight:bold;">informations ...</div>
<div id="trainings-info-psy" style="display:none;"><font style="font-weight:bold;">informations ...</div>
<div id="trainings-info-knack" style="display:none;"><font style="font-weight:bold;">informations ...</div>
<div id="trainings-info-pan" style="display:none;"><font style="font-weight:bold;">informations pratique...</div>

<div id="trainings-inscription-epars" style="display:none;"><font style="font-weight:bold;">je participe...</div>
<div id="trainings-inscription-psy" style="display:none;"><font style="font-weight:bold;">je participe</font><br/><br />quelle est votre...</div>

<div id="trainings-initiation" style="display:none;"><font style="font-weight:bold;">mod&egrave;le initiatique</font><br/>c'est par un enseignement...</div>

<div id="trainings-table" style="display:none;"><font style="font-weight:bold;">table d'h&ocirc;te</font><br/>les repas de midi, bien que libres, ....</div>

</div><!-- texte -->

</div><!-- contenu -->

<div class="highslide-menu-contextuel" id="menu-epars" style="display:none;">
<a href="#" onclick="DetectElementToHide('div','trainings-','trainings-intro-epars');">epars</a><br /><a href="#" onclick="DetectElementToHide('div','trainings-','trainings-target-epars');">pour qui?</a><br /><a href="#" onclick="DetectElementToHide('div','trainings-','trainings-cursus-epars');">cursus</a><br /><a href="#" onclick="DetectElementToHide('div','trainings-','trainings-info-epars');">pratique</a><br /><a href="#" onclick="DetectElementToHide('div','trainings-','trainings-inscription-epars');">je participe</a>
</div>
<div class="highslide-menu-contextuel" id="menu-psy" style="display:none;">
<a href="#" onclick="DetectElementToHide('div','trainings-','trainings-intro-psy');">psy</a><br /><a href="#" onclick="DetectElementToHide('div','trainings-','trainings-target-psy');">pour qui?</a><br /><a href="#" onclick="DetectElementToHide('div','trainings-','trainings-cursus-psy');">cursus</a><br /><a href="#" onclick="DetectElementToHide('div','trainings-','trainings-info-psy');">pratique</a><br /><a href="#" onclick="DetectElementToHide('div','trainings-','trainings-inscription-psy');">je participe</a>
</div>
<div class="highslide-menu-contextuel" id="menu-knack" style="display:none;">
<a href="#" onclick="DetectElementToHide('div','trainings-','trainings-intro-knack');">knack</a><br /><a href="#" onclick="DetectElementToHide('div','trainings-','trainings-target-knack');">pour qui?</a><br /><a href="#" onclick="DetectElementToHide('div','trainings-','trainings-cursus-knack');">cursus</a><br /><a href="#" onclick="DetectElementToHide('div','trainings-','trainings-info-knack');">pratique</a><br /><a href="#" onclick="DetectElementToHide('div','trainings-','trainings-inscription-knack');">je participe</a>
</div>
<div class="highslide-menu-contextuel" id="menu-pan" style="display:none;">
<a href="#" onclick="DetectElementToHide('div','trainings-','trainings-intro-pan');">pan</a><br /><a href="#" onclick="DetectElementToHide('div','trainings-','trainings-target-pan');">pour qui?</a><br /><a href="#" onclick="DetectElementToHide('div','trainings-','trainings-cursus-pan');">cursus</a><br /><a href="#" onclick="DetectElementToHide('div','trainings-','trainings-info-pan');">pratique</a><br /><a href="#" onclick="DetectElementToHide('div','trainings-','trainings-inscription-pan');">je participe</a>
</div>

</div><!-- body -->
<div class="highslide-footer"></div>
</div><!-- highslide -->
<!-- fin highslide epars  -->

When I open again the highslide, it never updates the div's to display.
is there another way to do this?

thanks in advance

[torstein.honsi]

Instead of this, use separate maincontentId divs or contentId's. Using maincontentId is generally better, as you don't have to worry about the looks of the popup.

[nath]

Hi, thank you for the quick response, but I tried maincontentId and it didn't work at all any more.
And we really need to open each time the same container with all "sub-div's" in it, and activate in it the "sub-div's" we need to (depending on wich link we clicked).
We would like to be able to change the visible content in the div by clicking on links in the content self or by clicking on links outside of the content, but without having to close and reopen a new div, and so we can't use different div's.

I put a sample of what we are trying to do here: http://www.web-imago.be/multiple-conten ... ainer.html
So you can have a better understanding of what I'm trying to explain.
click for instance on link1 then move the highslide, and click on link2, this changes the content inside => perfect. Now close the highslide and click on link 3, it will open again with content1 visible, whent it should open with content 3 visible.

Is there a way I could have this working?

thanks in advance

[torstein.honsi]

The first time the content is opened, it is moved into a collection called hs.clones, and on subsequent opens, it is cloned from there. So you could try changing the content of the hs.clones item.