How to display FAQ accordion on Joomla AMP pages?
In this post we show you how you can implement our FAQ module’s apperance and interactivity into Joomla AMP pages. You will need two extensions: JAmp plugin and Chjoom Pure CSS FAQ module.
What is JAmp?
JAmp is a plugin for Joomla that allows you to generate AMP (Accelerated Mobile Pages) version of your website. Applying AMP is basically inevitable today's accelerated internet world and with JAmp you can greatly improve your mobile loading speed and SEO page ranking as well.
About FAQ module
With our free FAQ extension you can display frequently asked questions and answers easily on your website and with a few settings on your AMP pages as well.
JAmp configuration
JAmp has many settings but in order to make FAQ module work properly on AMP pages you only have to configure the following ones after installation.
Extensions ➙ Plugins ➙ Jamp ➙ Features tab
01 Enable AMP form (only https) – Enable this setting which is responsible for drop-down answers.
Extensions ➙ Plugins ➙ Jamp ➙ Theme and contents tab
02 Include Font Awesome – Set to yes if you want Font Awesome arrows in your Q & A dropdowns.
03 Custom CSS sytles – Copy and paste the following CSS codes into this field. These allow you to display 32 Q&A.
.faqs { margin: 0 auto; transform: translateZ(0); } .faqs input[type="checkbox"] { position: absolute; opacity: 0; } .faqs label { margin: 5px 0; position: relative; display: block; color: #000000; padding: 6px 34px 6px 0; font-weight: 600; background: #f6f6f6; cursor: pointer; -webkit-transition: 0.2s; transition: 0.2s; border: solid 2px #000; border-radius: 10px; } .faqs label:hover { -webkit-transition: all 0.3s ease-out 0s; -moz-transition: all 0.3s ease-out 0s; -ms-transition: all 0.3s ease-out 0s; -o-transition: all 0.3s ease-out 0s; transition: all 0.3s ease-out 0s; -webkit-box-shadow: 1px 2px 8px 2px rgb(0 0 0 / 20%); -moz-box-shadow: 1px 2px 8px 2px rgba(0, 0, 0, 0.2); box-shadow: 1px 2px 8px 2px rgb(0 0 0 / 20%); cursor: pointer; } .faqs label span, .faqs label p, .faqs label h2, .faqs label h3, .faqs label h4, .faqs label h5, .faqs label h6 { margin: initial; padding: 0 20px; line-height: 1.34; display: block; text-transform: none; margin-top: 2px; padding-right: 15px; } .faq-container section { max-height: 0; transition: .3s all; overflow: hidden; padding: 0 20px; } #faq1:checked~label[for*='1']:after, #faq2:checked~label[for*='2']:after, #faq3:checked~label[for*='3']:after, #faq4:checked~label[for*='4']:after, #faq5:checked~label[for*='5']:after, #faq6:checked~label[for*='6']:after, #faq7:checked~label[for*='7']:after, #faq8:checked~label[for*='8']:after, #faq9:checked~label[for*='9']:after, #faq10:checked~label[for*='10']:after, #faq11:checked~label[for*='11']:after, #faq12:checked~label[for*='12']:after, #faq13:checked~label[for*='13']:after, #faq14:checked~label[for*='14']:after, #faq15:checked~label[for*='15']:after, #faq16:checked~label[for*='16']:after, #faq17:checked~label[for*='17']:after, #faq18:checked~label[for*='18']:after, #faq19:checked~label[for*='19']:after, #faq20:checked~label[for*='20']:after, #faq21:checked~label[for*='21']:after, #faq22:checked~label[for*='22']:after, #faq23:checked~label[for*='23']:after, #faq24:checked~label[for*='24']:after, #faq25:checked~label[for*='25']:after, #faq26:checked~label[for*='26']:after, #faq27:checked~label[for*='27']:after, #faq28:checked~label[for*='28']:after, #faq29:checked~label[for*='29']:after, #faq30:checked~label[for*='30']:after, #faq31:checked~label[for*='31']:after, #faq32:checked~label[for*='32']:after { transform: rotate(0); } #faq1:checked~#answ1, #faq2:checked~#answ2, #faq3:checked~#answ3, #faq4:checked~#answ4, #faq5:checked~#answ5, #faq6:checked~#answ6, #faq7:checked~#answ7, #faq8:checked~#answ8, #faq9:checked~#answ9, #faq10:checked~#answ10, #faq11:checked~#answ11, #faq12:checked~#answ12, #faq13:checked~#answ13, #faq14:checked~#answ14, #faq15:checked~#answ15, #faq16:checked~#answ16, #faq17:checked~#answ17, #faq18:checked~#answ18, #faq19:checked~#answ19, #faq20:checked~#answ20, #faq21:checked~#answ21, #faq22:checked~#answ22, #faq23:checked~#answ23, #faq24:checked~#answ24, #faq25:checked~#answ25, #faq26:checked~#answ26, #faq27:checked~#answ27, #faq28:checked~#answ28, #faq29:checked~#answ29, #faq30:checked~#answ30, #faq31:checked~#answ31, #faq32:checked~#answ32 { max-height: 7000px; border: solid 2px #000; margin-right: 0px; background: #f6f6f6; margin-top: -16px; padding-top: 1rem; border-radius: 0 0 10px 10px; } body > section article.post .faqs h2, body > section article.post .faqs h3, body > section article.post .faqs h4, body > section article.post .faqs h5, body > section article.post .faqs h6, body > section article.post .faqs span, body > section article.post .faqs label p { margin: 0; } body > section article.post .faqs h2 { font-size: 2rem; } body > section article.post .faqs h3 { font-size: 1.75rem; } body > section article.post .faqs h4 { font-size: 1.5rem; } body > section article.post .faqs h5 { font-size: 1.25rem; } body > section article.post .faqs h6 { font-size: 1rem; } CSS rules to apply in different Font Awesome cases
In order to make the arrows work in the accordion you must complement the CSS code above with the following codes that are depending on the Font Awesome versions set in the FAQ module.
FA load mode: FA v4.7.0 or FA v6.
If your FAQ module's styling is set for FA v4.7.0 or FA v6.0.0 you should add this code among the other CSS codes in JAmp.
.faqs label:after { content: '\f078'; position: absolute; top: 5px; right: 8px; font-family: "Font Awesome 5 Free"; font-weight: 900; transform: rotate(90deg); transition: .3s transform; } FA load mode: Don't load FA
If you don't want to load Font Awesome, choose this option within the module. In this case the accordion will use unicode icons, however for this you should also set 'CSS without FA' at 'CSS file to use' field. If this is the case you can turn off 'Include Font Awesome' setting from the template, that has been configured to 'yes' previously. Then add this code:
.faqs label:after { content: '\00AB'; position: absolute; top: 5px; right: 8px; font-weight: 900; transform: rotate(0deg); transition: .3s transform; } Top-notch Joomla! services:
If you need support or custom Joomla development or you just want you Joomla website fully AMPlified get in touch with us.