Adding an Accordion to CMS pages - SOLUTION

[nikmagnus]

Hi there all,
I've been trying to get an accordion style display on some of my CMS and have come up with a working solution using PS 1.4RC4.
I'm not a programmer, and cant make modules. This solution are confined to files in your theme folder.

Hope some people find it useful. Feel free to make corrections / suggestions! I couldnt get it working with JQuery so used Mootools Javascript

----------------

How to add Accordion to CSM pages:

In yourtheme/js, add Mootools core and more javascripts.
Download them from the Mootools website: http://mootools.net/download
Note when building the Mootools More you need Fx.Accordion and Fx.element. If in doubt, use all.

In the yourtheme/css folder,
create a file called accordion.css
Insert this code:

h3.toggler  { cursor:pointer; /*font-weight:bold;*/ margin: 0px 0; font-size:16px; font-family:Arial, sans-serif; }
.toggler:hover     { background:#ddd; }
.element     { padding:0 5px; }
.image     { margin:10px 20px; float:right; }
p.body {padding-left:5px; font-size:12px; color: #555953; }

Open up the header.tpl file in your theme folder.
Add in the following code at around line 61 or before the "head" tag is closed

<!-- Addition for Accordion -->
   [removed][removed]
   [removed][removed]
   <link   type="text/css"       href="{$css_dir}accordion.css" rel="stylesheet">

   [removed]
   window.addEvent('domready', function() { 
       var accordion = new Accordion($$('.toggler'),$$('.element'), {
           opacity: 0,
           // display: -1, - this closes the accordion initially
           height:true,
           onActive: function(toggler) { toggler.setStyle('color', '#895813'); },
           onBackground: function(toggler) { toggler.setStyle('color', '#000000'); }
       });
   });
   [removed]

<!-- Addition for Accordion -->

Finally, here is some example html markup that you can use for including in a CMS page. in the TinyMCE editor, press the HTML button and paste this in:

This is working for me PS 1.4.0.13

Good luck!

Common Questions

How far apart do I plant my trees?


For espaliered apples we'd suggest 2m or 2.5m apart, or at a minimum 1.5m. Look at our article on espaliering, and note how the branches grow to meet it's neighbour.

How far apart do I make my rows?


This depends on what you wish to drive between them. If it's a tractor or ute (eg for mowing, harvesting, pruning or mulching) then leave between 3-4m if they are espaliered. A metre wider if they are free standing. If you plan to only walk between the rows, leave at least 2m.

Do I orient my rows North/South or East/West?


Most fruit trees do well either way, but grapes tend to be more fickle. We find more important is the vehicle access and drainage if on a slope. Planting across the contour of a slope may pool water, and cause water-logging in high rainfall area. Vehicles drive less well across the slope unless it is terraced.

[LDDS]

Hi
Looks great !
Could you tell a newbie what I should write instead of [removed] in my code
Is it ?
Thx

[nikmagnus]

I would recommend not to use this.
The javascript interferes with other things and the display becomes unpredictable.
Back to the drawing board!

[L'Agence Nature]

Hi there, (I'm not a coder)

 

I looking for a solution. I need to hace an OPEN/COLSE fonction inside cms page.

I know there is in \themes\prestashop\js\tools the file name treeManagement.js This is the one that commande OPEN and CLOSE fonction.

 

I don't know how to set up the code in the CMS html - any idea?

I tried this in HTML, but doesn't work:

 

<ul class="tree dynamized" style="display: block;">
<li>
 <span class="grower CLOSE"> </span>
  <a title="" href="#"><h3>MY TITLE 1</h3></a>
 <ul style="display: none;">
  <li>
       <p>Alii nullo quaerente vultus severitate adsimulata patrimonia sua in inmensum extollunt,
cultorum ut puta feracium multiplicantes annuos fructus, quae a primo ad ultimum solem se abunde</p>
  </li>
 </ul>
</li>
<li>
 <span class="grower CLOSE"> </span>
  <a title="" href="#"><h3>MY TITLE 2 </h3></a>
 <ul style="display: none;">
  <li>
       <p>Alii nullo quaerente vultus severitate adsimulata patrimonia sua in inmensum extollunt,
cultorum ut puta feracium multiplicantes annuos fructus, quae a primo ad ultimum solem se abunde</p>
  </li>
 </ul>
</li>
<li>
 <span class="grower CLOSE"> </span>
  <a title="" href="#"><h3>MY TITLE 3</h3> </a>
 <ul style="display: none;">
  <li>
       <p>Alii nullo quaerente vultus severitate adsimulata patrimonia sua in inmensum extollunt,
cultorum ut puta feracium multiplicantes annuos fructus, quae a primo ad ultimum solem se abunde</p>
  </li>
 </ul>
</li>
</ul>

 

with this in css:

#center_column span.CLOSE {
background-image:url("../img/icon/more.gif");
}
#center_column span.OPEN {
background-image:url("../img/icon/less.gif");
}
#center_column span.grower {
background-position:0 3px;
background-repeat:no-repeat;
display:block;
float:left;
height:15px;
margin:0 0 0 -12px !important;
padding:0;
width:9px;
}

 

Thanks for your help.

[nikmagnus]

Try this for an example:

simply paste this into your cms page after pressing the HTML button in tinyMCE HTML editor

Experiment and change.

Check out JQUERY site for examples.

http://docs.jquery.com/UI/Accordion

 

<div id="accordion">
<h3><a href="#">Section 1</a></h3>
<div>
<p>Mauris mauris ante, blandit et, ultrices a, suscipit eget, quam. Integer ut neque. Vivamus nisi metus, molestie vel, gravida in, condimentum sit amet, nunc. Nam a nibh. Donec suscipit eros. Nam mi. Proin viverra leo ut odio. Curabitur malesuada. Vestibulum a velit eu ante scelerisque vulputate.</p>
</div>
<h3><a href="#">Section 2</a></h3>
<div>
<p>Sed non urna. Donec et ante. Phasellus eu ligula. Vestibulum sit amet purus. Vivamus hendrerit, dolor at aliquet laoreet, mauris turpis porttitor velit, faucibus interdum tellus libero ac justo. Vivamus non quam. In suscipit faucibus urna.</p>
</div>
<h3><a href="#">Section 3</a></h3>
<div>
<p>Nam enim risus, molestie et, porta ac, aliquam ac, risus. Quisque lobortis. Phasellus pellentesque purus in massa. Aenean in pede. Phasellus ac libero ac tellus pellentesque semper. Sed ac felis. Sed commodo, magna quis lacinia ornare, quam ante aliquam nisi, eu iaculis leo purus venenatis dui.</p>
<ul>
<li>List item one</li>
<li>List item two</li>
<li>List item three</li>
</ul>
</div>
<h3><a href="#">Section 4</a></h3>
<div>
<p>Cras dictum. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Aenean lacinia mauris vel est.</p>
<p>Suspendisse eu nisl. Nullam ut libero. Integer dignissim consequat lectus. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos.</p>
</div>
</div>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js"></script>
<script type="text/javascript">// <![CDATA[
 $(document).ready(function() {
$("#accordion").accordion();
 });
// ]]></script>

 

Note that these scripts link to jquery libraries that are probably already available on your site. I'm sure you could find a way to find them and update the links yourself.

Hope it works!

Nik

[wiho]

great, thanks for part of the code

[L'Agence Nature]

Ho man! You save my life. It works! Thanks a lot.

 

I had this code already, but I didn't know that

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js"></script>
<script type="text/javascript">// <![CDATA[
 $(document).ready(function() {
    $("#accordion").accordion();
 });
// ]]></script>

 

Can be included in html tinymce of cms page.

 

Thank you again.

 

David

[VVIEEIE]

I am not that much of a developer and while I know how to insert this code, I am not sure how to change the script bit? Can anyone help?

[Vivien Schmitt]

It would be fantastic if it would be working; but it doesn't work at all!