Page 1 of 1

Startexpandcollapse

Posted: Wed Dec 28, 2011 11:21 pm
by 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

Re: Startexpandcollapse

Posted: Thu Dec 29, 2011 8:24 am
by Rolf

Re: Startexpandcollapse

Posted: Thu Dec 29, 2011 7:32 pm
by 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

Re: Startexpandcollapse

Posted: Wed Jan 04, 2012 3:52 am
by 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 ;D ), it's lightbox and jquery which are incompatible.