Jump to content
  • 0
srjacob

FAQ CMS block

Question

Does anyone know, within the context of CMS, how to build a frequently asked questions list?  What I would like to do is have the questions with a + sign in front of them.  When the + is clicked, the questions expands with the anserer given. 

 

If anyone knows of a better way to do frequently asked questions, I would be glad to hear of it.

 

Thanks in advance.

 

Steve

Share this post


Link to post
Share on other sites

14 answers to this question

Recommended Posts

  • 0

this is more of a module function.  I don't want to discourage you from searching for a CMS solution.

 

I would search for modules 'prestashop module faq'.  (also keep an eye out for modules in 'other languages'.)  You might find a nice free one or buy a paid solution.

 

here is an example of module from addon's

http://addons.prestashop.com/en/content-management/8141-lof-faq-module.html

Share this post


Link to post
Share on other sites
  • 0

it's easy to achieve. take a look what i created: http://codepen.io/hrbj/pen/ylswC

 

to define content in cms editor use code like this:

<div id="accordion-container"> 
     <h2 class="accordion-header">Section 1</h2> 
     <div class="accordion-content"> 
          <p>Section 1 Content</p> 
     </div> 
     <h2 class="accordion-header">Section 2</h2> 
     <div class="accordion-content"> 
          <p>Section 2 Content</p> 
     </div> 
</div>

to global.css paste this code:
 

#accordion-container {
	font-size: 13px;
	background: #ffffff;
	padding: 5px 10px 10px 10px;
	border: 1px solid #cccccc;
	-moz-border-radius: 5px;
	-webkit-border-radius: 5px;
	border-radius: 5px;
	-moz-box-shadow: 0 5px 15px #cccccc;
	-webkit-box-shadow: 0 5px 15px #cccccc;
	box-shadow: 0 5px 15px #cccccc;
}

.accordion-header {
	font-size: 16px;
	background: #ebebeb;
	margin: 5px 0 0 0;
	padding: 5px 20px;
	border: 1px solid #cccccc;
	cursor: pointer;
	color: #666666;
	-moz-border-radius: 5px;
	-webkit-border-radius: 5px;
	border-radius: 5px;
}

.active-header {
	-moz-border-radius: 5px 5px 0 0;
	-webkit-border-radius: 5px 5px 0 0;
	border-radius: 5px 5px 0 0;
	background: url(images/active-header.gif) #cef98d;
	background-repeat: no-repeat;
	background-position: right 50%;
}

.active-header:hover {
	background: url(images/active-header.gif) #c6f089;
	background-repeat: no-repeat;
	background-position: right 50%;
}

.inactive-header {
	background: url(images/inactive-header.gif) #ebebeb;
	background-repeat: no-repeat;
	background-position: right 50%;
}

.inactive-header:hover {
	background: url(images/inactive-header.gif) #f5f5f5;
	background-repeat: no-repeat;
	background-position: right 50%;
}

.accordion-content {
	display: none;
	padding: 20px;
	background: #ffffff;
	border: 1px solid #cccccc;
	border-top: 0;
	-moz-border-radius: 0 0 5px 5px;
	-webkit-border-radius: 0 0 5px 5px;
	border-radius: 0 0 5px 5px;
}

and in header.tpl file between <header></header> tags use this:

{literal}
<script>$(document).ready(function()
{
//Add Inactive Class To All Accordion Headers
$('.accordion-header').toggleClass('inactive-header');


//Set The Accordion Content Width
var contentwidth = $('.accordion-header').width();
$('.accordion-content').css({'width' : contentwidth });


//Open The First Accordion Section When Page Loads
$('.accordion-header').first().toggleClass('active-header').toggleClass('inactive-header');
$('.accordion-content').first().slideDown().toggleClass('open-content');


// The Accordion Effect
$('.accordion-header').click(function () {
if($(this).is('.inactive-header')) {
$('.active-header').toggleClass('active-header').toggleClass('inactive-header').next().slideToggle().toggleClass('open-content');
$(this).toggleClass('active-header').toggleClass('inactive-header');
$(this).next().slideToggle().toggleClass('open-content');
}


else {
$(this).toggleClass('active-header').toggleClass('inactive-header');
$(this).next().slideToggle().toggleClass('open-content');
}
});


return false;
});</script>
{/literal}

Share this post


Link to post
Share on other sites
  • 0

Good morning

 

Another great tutorial from Milos, if you want to see this in action click HERE

 

It took all of ten minutes to achieve

 

Paul

Where can I find the tutorial?

Share this post


Link to post
Share on other sites
  • 0

Is it possible to do this accordion style for the products page as well?  So the main categories are listed on the same page with the products under each parent category.

 

Category 1

      (and subcategories slide out which can display the products in that category).

 

Category 2

      (and subcategories slide out which can display the products in that category).

 

Category 3

      (and subcategories slide out which can display the products in that category).

Share this post


Link to post
Share on other sites
  • 0

 

it's easy to achieve. take a look what i created: http://codepen.io/hrbj/pen/ylswC

 

to define content in cms editor use code like this:

<div id="accordion-container"> 
     <h2 class="accordion-header">Section 1</h2> 
     <div class="accordion-content"> 
          <p>Section 1 Content</p> 
     </div> 
     <h2 class="accordion-header">Section 2</h2> 
     <div class="accordion-content"> 
          <p>Section 2 Content</p> 
     </div> 
</div>

to global.css paste this code:

 

#accordion-container {
	font-size: 13px;
	background: #ffffff;
	padding: 5px 10px 10px 10px;
	border: 1px solid #cccccc;
	-moz-border-radius: 5px;
	-webkit-border-radius: 5px;
	border-radius: 5px;
	-moz-box-shadow: 0 5px 15px #cccccc;
	-webkit-box-shadow: 0 5px 15px #cccccc;
	box-shadow: 0 5px 15px #cccccc;
}

.accordion-header {
	font-size: 16px;
	background: #ebebeb;
	margin: 5px 0 0 0;
	padding: 5px 20px;
	border: 1px solid #cccccc;
	cursor: pointer;
	color: #666666;
	-moz-border-radius: 5px;
	-webkit-border-radius: 5px;
	border-radius: 5px;
}

.active-header {
	-moz-border-radius: 5px 5px 0 0;
	-webkit-border-radius: 5px 5px 0 0;
	border-radius: 5px 5px 0 0;
	background: url(images/active-header.gif) #cef98d;
	background-repeat: no-repeat;
	background-position: right 50%;
}

.active-header:hover {
	background: url(images/active-header.gif) #c6f089;
	background-repeat: no-repeat;
	background-position: right 50%;
}

.inactive-header {
	background: url(images/inactive-header.gif) #ebebeb;
	background-repeat: no-repeat;
	background-position: right 50%;
}

.inactive-header:hover {
	background: url(images/inactive-header.gif) #f5f5f5;
	background-repeat: no-repeat;
	background-position: right 50%;
}

.accordion-content {
	display: none;
	padding: 20px;
	background: #ffffff;
	border: 1px solid #cccccc;
	border-top: 0;
	-moz-border-radius: 0 0 5px 5px;
	-webkit-border-radius: 0 0 5px 5px;
	border-radius: 0 0 5px 5px;
}

and in header.tpl file between <header></header> tags use this:

{literal}
<script>$(document).ready(function()
{
//Add Inactive Class To All Accordion Headers
$('.accordion-header').toggleClass('inactive-header');


//Set The Accordion Content Width
var contentwidth = $('.accordion-header').width();
$('.accordion-content').css({'width' : contentwidth });


//Open The First Accordion Section When Page Loads
$('.accordion-header').first().toggleClass('active-header').toggleClass('inactive-header');
$('.accordion-content').first().slideDown().toggleClass('open-content');


// The Accordion Effect
$('.accordion-header').click(function () {
if($(this).is('.inactive-header')) {
$('.active-header').toggleClass('active-header').toggleClass('inactive-header').next().slideToggle().toggleClass('open-content');
$(this).toggleClass('active-header').toggleClass('inactive-header');
$(this).next().slideToggle().toggleClass('open-content');
}


else {
$(this).toggleClass('active-header').toggleClass('inactive-header');
$(this).next().slideToggle().toggleClass('open-content');
}
});


return false;
});</script>
{/literal}

Hy, Great, it works perfectly on prestashop 1.6.

I'd like to change a little thing, but i d'ont know how to do that. Is there anybody to help me?

I'd like that the open tabs doesn't close automaticly. I'd like it to close only on click. Is it possible? and how make that possible?

Thank for any help.

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

×