FAQ in CMS

[archproject]

Hi there,

Can I create an animated FAQ in the TOOLS>CMS section ? I can't remember where I got the example from but let me describe it

I want a CMS page where the user will be able to see the questions only with a little "+" (plus) sign at the very beginning for example

+ What is prestashop? 
+ What is Shopping?

Then when the user click on the + sign the answer to the question above will appear below it (animated) like drop down like below:

+ What is prestashop? 
    ANS: Prestashop is a shopping cart system
+ What is Shopping?

Then if the user clicks on another + sign on another question the previous answer will disappear and and the other answer to the other question drops down like below:

+ What is prestashop? 
+ What is Shopping?
   ANS : Shopping is what girls love

I hope I have made myself clear ?

Regards
Archproject

[archproject]

Ok no body is replying to my post yet so I did some googling.

Here's what i have there's a DHTML code I can use

CODE

with demo

DEMO

I tried to put it into the CMS but no luck ... it only display the TEXT .. and YES I did click on the HTML button on TinyMCE

Regards
ARchproject

[Star]

This is very easy to implement it into the cms pages. It will only take 10 minutes to do so. Let me know if this is what you want, I will show you how to do it.

I also find you a module that is using the same script but the pages are not on the CMS. http://www.prestashop.com/forums/viewthread/33081/third_party_modules/free_faq_module_v1_dot_0

[archproject]

Thank you very much

I have posted some suggestions for your module at your post

Regards
Archproject

[frank.paoile]

Thanks for the disable Java tip

[L'Agence Nature]

Hi there, (I'm not a coder and I don't want to use faq module, only inside the html tinymce of cms page)

 

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.

[damis]

This is very easy to implement it into the cms pages.

[L'Agence Nature]

Please Damis, show me the way.... (what "Image IPB" means? )

 

 

What I'm trying to do is:

create a cms page in my Back office and insert into the tinymce html a code to create an OPEN and CLOSE text with title <h3> and paragraph <p>.

 

In the demo online of prestashop ihere, for exemple: http://demo-store.pr...nditions-of-use we can see that there is an accordion feature at the category level in the left column. Is it possible to use the same proceed to create an SHOW an HIDE text in the cms page terms-and-conditions-of-use for exemple?

 

The treemanagement.js seems to have everything for OPEN and CLOSE effect - Category menu use this effect. We can, may be, creat or find the relevant code to insert into html, css and tpl...

 

Any idea on your side?

 

David

 

Something like that:

[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

[L'Agence Nature]

Thanks!

[nikmagnus]

If this solves your issue, please put [sOLVED] at the beginning of the title of this topic.

Thanks, Nik

[L'Agence Nature]

Yes, this solves my issue, but I'm not the author of this topic. archproject is.