Startexpandcollapse

[mel]

Hi,
I saw this http://forum.cmsmadesimple.org/viewtopi ... se#p262645
describing the new way to use a toggle. But I don't really understand how it works.
I put the {cms_jquery} in the gabarit and put this on my template :

<div class="toggle" rel="box1">expand a</div>
<div class="area" id="box1">abcdefg</div>

But it does nothing. Does it suppose to work by itself? Do I have to use some CSS somewhere? (I upgrade a previous version with its own css, so maybe I miss something on the road).
Thanks
Mel

[Rolf]

Have you tried: http://dev.cmsmadesimple.org/projects/contenttoggle ?

Grtz. Rolf

[mel]

Hi,
This is work... if I use the default template and not my template/stylesheet.
It create a

Code: Select all

<h2 class="trigger">

, which make no sense in my website as h2 is not the same hierarchy than what is suppose to be the collapsed content.
I don't know if this is the cause, but the block is not collapsable as if I put the same content in a page using the default Nblue template.
What should I do?
Thanks

[mel]

Hi,
I'm feeling stupid, I just didn't copy also the script. So finally the JeremyBass' script is working but I can't get the result I want.
I search through google many tutorials but as I discover just a couple of days ago what is JQuery, I have no idea how to modify. It should be simple but I could'nt find any example of an ordered list.

I succeed to get my list collapsable, but only with <ul>, never with <ol>, and have no idea how to do it. I may think it have something related to select something as a trigger but I'm not sure of the syntax.

Code: Select all

$( "#accordion" ).accordion({
			collapsible: true
      });

   });

An example. Expand is ok, but the list is not working, it restart to 1 at each item.

Code: Select all

<h4>2010</h4>
<div id="accordion">
<div><ol>
<li>Title<a href="http://pubmed.com >[Lire l'article]</a>[Résumé↓]</li>
</ol></div>
<div class="expand">text.</div>
<div>
<ol>
<li>title<a href="http://pubmed.com>[Lire l'article]</a>[Résumé↓]</li>
</ol></div>
<div class="expand">TEXT</div>
</div>

The expand could be either on the whole <li> or just on a single word (resumé), I don't really care. But I need an ordered list (it have 10-15 items).

It's quite more complicated than the previous tag, which I try to recreate this:

Code: Select all

<ol>
<li id="Yang10">Title <br />
<div style="text-align: center;"><a href="http://eutils.ncbi.nlm.nih.gov/">[Lire l'article]</a>{startExpandCollapse id='a_Yang10' title='[Résumé↓]'}Text{stopExpandCollapse}</div>
</li>
</ol>

Thanks to anyone who wants to help me in this new year!
Mel

PS to answer myself (for my own reference in future ), it's lightbox and jquery which are incompatible.