Jump to content

FAQ CMS block


Recommended Posts

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

Link to comment
Share on other sites

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

Link to comment
Share on other sites

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}
  • Like 4
  • Thanks 2
Link to comment
Share on other sites

  • 1 year later...

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).

Link to comment
Share on other sites

  • 1 year later...
  • 2 months later...

 

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.

Link to comment
Share on other sites

  • 4 months later...
  • 1 year later...
  • 5 months later...
  • 10 months later...
On 7/30/2016 at 12:44 PM, jgd24 said:

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');

Sorry, I'm dumb...
Where to put this in prestashop 1.7.6.2
Classic default theme?
Thanks

Link to comment
Share on other sites

 OK,
after some tryes I made it work.
Had to put the script in
classic/templates/_partials/javascript.tpl

just after
 

{foreach $javascript.external as $js}
  <script type="text/javascript" src="{$js.uri}" {$js.attribute}></script>
{/foreach}

{foreach $javascript.inline as $js}
  <script type="text/javascript">
    {$js.content nofilter}
  </script>
{/foreach}

In this way accordion works but I have always an annoying

Uncaught ReferenceError: $ is not defined

in chrome console.

Any suggestions?
Thank you.
 

Edited by maicolstaip (see edit history)
Link to comment
Share on other sites

  • 8 months later...
On 9/19/2020 at 10:43 AM, Yulia Vitun said:

how to make images added to accordion change width according to the devise screen resolution?

I had to comment out the width of the .accordian-content class in the javascript and then make adjustments in the custom CSS file in my theme/assets/css

I had to put this is themes/core.js and comment out there.

I am not sure how your folder structure works, but I hope this helps.

 

Screen Shot 2020-09-21 at 11.37.44 AM.png

Link to comment
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
×
×
  • Create New...