Hi All,
I am working on creating a FAQ page for our users and I want to put most popular questions on the landing page in a way like accordion so when you click the drop down you can display the answer without going to another page/browser. Has any of you done such a thing? Any other suggestions will be appreciated.
Thank you all,
Best answer by Sdinnoce
Hello
HTML
<!-- FREQUENTLY ASKED QUESTIONS -->
<div style="padding:24px;">
<div>
<p style="font-size:26px;font-family:Nunito, sans-serif;font-weight:300;margin:0px 0px 8px;">Frequently Asked Questions</p>
</div>
<!-- Custom Accordion - ILT FAQs -->
<div id="custom-accordion" class="acc-style">
<ul><li><input id="item-1" class="acc-item" checked="checked" name="item-accordion" type="radio" value="" /><label class="acc-label">Already enrolled? </label>
<div class="content">
<p><a href="www.docebo.com">Click here to access My Training</a> or click on the course in the calendar. Find your class on the My Training page. Click on the class to access the course materials and survey (Content tab) and access the Zoom link, 30 minutes before class starts.</p>
</div>
</li>
<li><input id="item-2" class="acc-item" name="item-accordion" type="radio" value="" /><label class="acc-label">How do I enroll in and pay for training on this site? </label>
<div class="content">
<p>When you purchase training (including enrolling in our instructor-led courses), we will invoice your institution based on the billing contact information that we have on record for your institution. To purchase training, click the Add to Cart button for a course, then follow the prompts. We do not accept credit cards at this time.</p>
</div>
</li>
<li><input id="item-3" class="acc-item" name="item-accordion" type="radio" value="" /><label class="acc-label">Can I enroll someone else into a course?</label>
<div class="content">
<p><b>No.</b> Each class participant must enroll themselves and acknowledge the terms and conditions.</p>
</div>
</li>
<li><input id="item-4" class="acc-item" name="item-accordion" type="radio" value="" /><label class="acc-label">When will I see my class information?</label>
<div class="content">
<p>Enrolled users can expect to receive a class information email, approximately five (5) calendar days prior to the first day of class, with a follow-up email two (2) days out. This email provides instructions on how to access the course materials and Zoom session. All students will have access to the Zoom session 30 minutes before class start time each day. If you do not see the email in your inbox, check your spam/junk folders. You can also log back into your account as you did to register. Find your class under My Training on the Home Page. Click on the class to access the course materials and survey (Content tab) and access the Zoom link, 30 minutes before class starts.</p>
</div>
</li>
<li><input id="item-5" class="acc-item" name="item-accordion" type="radio" value="" /><label class="acc-label">What time is class held?</label>
<div class="content">
<p>Unless noted otherwise, all instructor-led training classes are held in Eastern Time (New York). Please check the time zone listed after the session time to verify the time listed in your time zone.</p>
</div>
</li>
<li><input id="item-6" class="acc-item" name="item-accordion" type="radio" value="" /><label class="acc-label">What is the cancellation policy for training courses?</label>
<div class="content">
<p>It depends upon the type of training that was purchased. Below is a general overview. Please carefully review our terms and conditions as you complete the checkout process.</p>
<p>For enrollments in instructor-led courses, you must contact us via email at our email address no less than twenty-two (22) days prior to the scheduled session. If your request is received outside of the cancellation policy window, your organization will still owe full course fee unless you identify an attendee substitution who has fulfilled all the prerequisites for the course.</p>
<p>For purchases of all other items, including eLearning courses, learning plans, and On-Demand Training subscriptions, all sales are final.</p>
</div>
</li>
<li><input id="item-7" class="acc-item" name="item-accordion" type="radio" value="" /><label class="acc-label">Can we offer a dedicated class for my institution?</label>
<div class="content">
<p>Yes, please contact us to set up a dedicate course for your insitution. Dedicated courses are offered for groups of 6 or more.</p>
</div>
</li>
<li class="noborder"><input id="item-8" class="acc-item" name="item-accordion" type="radio" value="" /><label class="acc-label">How should Company Name employees enroll in a course? </label>
<div class="content">
<p>You must sign in using your employee user account to purchase or enroll in a course, as this will ensure that the customer is not invoiced for the purchase. This is especially important for employees who work onsite for a Company Name customer.</p>
</div>
</li>
</ul></div></div>
Here is the css for accordion. I downloaded this from an asset in Docebo University called Take Platform Design to the Next Level It was very helpful.
CSS
/* CUSTOM ACCORDION STARTS HERE */
.acc-item:checked ~ .acc-label .zmdi-chevron-down {display: none;}
.acc-item:checked ~ .acc-label .zmdi-chevron-up {display:inline;}
#custom-accordion label span {margin-right: 30px; display: block;}
#custom-accordion ul{list-style:none;margin:0;padding:0;}
#custom-accordion li{margin:0;padding:0; position: relative; border-bottom: 1px solid #e4e6e5;}
#custom-accordion .content{padding:0 20px;overflow:hidden;border:1px solid #fff;-webkit-transition:all .5s ease-out;-moz-transition:all .5s ease-out; position: relative; z-index: 2;}
.acc-style ul li{overflow:hidden;margin:0 0 1px;}
.acc-style ul li .content{height:0px;border-top:0;transition:all .5s ease-out;}
.acc-item:checked ~ .content{height:auto;}
.acc-item {cursor: pointer; position: absolute; opacity: 0; top: 0; left: 0; margin: 0; z-index: 1; width: 100%; height: 100%;}
.zmdi-chevron-up { display: none;}
#custom-accordion ul li { position: relative;}
/*Accordion Styles*/
.acc-style ul li label{padding: 10px 20px;}
#custom-accordion{background: #ffffff;}
.acc-label i{position: absolute; top: 10px; right: 15px; color: #0465ac; font-size: 25px;}
.noborder {border-bottom: 0px !important;}
#custom-accordion p{color:#333; margin:0 0 10px; line-height: 20px;}
#custom-accordion label{position: relative; display:block;font-size:16px;line-height:20px;color:#0465ac;font-weight:600;cursor:pointer;}
/* CUSTOM ACCORDION ENDS HERE */
I did but had to do it via HTML coding - would love a better way!
Hello
HTML
<!-- FREQUENTLY ASKED QUESTIONS -->
<div style="padding:24px;">
<div>
<p style="font-size:26px;font-family:Nunito, sans-serif;font-weight:300;margin:0px 0px 8px;">Frequently Asked Questions</p>
</div>
<!-- Custom Accordion - ILT FAQs -->
<div id="custom-accordion" class="acc-style">
<ul><li><input id="item-1" class="acc-item" checked="checked" name="item-accordion" type="radio" value="" /><label class="acc-label">Already enrolled? </label>
<div class="content">
<p><a href="www.docebo.com">Click here to access My Training</a> or click on the course in the calendar. Find your class on the My Training page. Click on the class to access the course materials and survey (Content tab) and access the Zoom link, 30 minutes before class starts.</p>
</div>
</li>
<li><input id="item-2" class="acc-item" name="item-accordion" type="radio" value="" /><label class="acc-label">How do I enroll in and pay for training on this site? </label>
<div class="content">
<p>When you purchase training (including enrolling in our instructor-led courses), we will invoice your institution based on the billing contact information that we have on record for your institution. To purchase training, click the Add to Cart button for a course, then follow the prompts. We do not accept credit cards at this time.</p>
</div>
</li>
<li><input id="item-3" class="acc-item" name="item-accordion" type="radio" value="" /><label class="acc-label">Can I enroll someone else into a course?</label>
<div class="content">
<p><b>No.</b> Each class participant must enroll themselves and acknowledge the terms and conditions.</p>
</div>
</li>
<li><input id="item-4" class="acc-item" name="item-accordion" type="radio" value="" /><label class="acc-label">When will I see my class information?</label>
<div class="content">
<p>Enrolled users can expect to receive a class information email, approximately five (5) calendar days prior to the first day of class, with a follow-up email two (2) days out. This email provides instructions on how to access the course materials and Zoom session. All students will have access to the Zoom session 30 minutes before class start time each day. If you do not see the email in your inbox, check your spam/junk folders. You can also log back into your account as you did to register. Find your class under My Training on the Home Page. Click on the class to access the course materials and survey (Content tab) and access the Zoom link, 30 minutes before class starts.</p>
</div>
</li>
<li><input id="item-5" class="acc-item" name="item-accordion" type="radio" value="" /><label class="acc-label">What time is class held?</label>
<div class="content">
<p>Unless noted otherwise, all instructor-led training classes are held in Eastern Time (New York). Please check the time zone listed after the session time to verify the time listed in your time zone.</p>
</div>
</li>
<li><input id="item-6" class="acc-item" name="item-accordion" type="radio" value="" /><label class="acc-label">What is the cancellation policy for training courses?</label>
<div class="content">
<p>It depends upon the type of training that was purchased. Below is a general overview. Please carefully review our terms and conditions as you complete the checkout process.</p>
<p>For enrollments in instructor-led courses, you must contact us via email at our email address no less than twenty-two (22) days prior to the scheduled session. If your request is received outside of the cancellation policy window, your organization will still owe full course fee unless you identify an attendee substitution who has fulfilled all the prerequisites for the course.</p>
<p>For purchases of all other items, including eLearning courses, learning plans, and On-Demand Training subscriptions, all sales are final.</p>
</div>
</li>
<li><input id="item-7" class="acc-item" name="item-accordion" type="radio" value="" /><label class="acc-label">Can we offer a dedicated class for my institution?</label>
<div class="content">
<p>Yes, please contact us to set up a dedicate course for your insitution. Dedicated courses are offered for groups of 6 or more.</p>
</div>
</li>
<li class="noborder"><input id="item-8" class="acc-item" name="item-accordion" type="radio" value="" /><label class="acc-label">How should Company Name employees enroll in a course? </label>
<div class="content">
<p>You must sign in using your employee user account to purchase or enroll in a course, as this will ensure that the customer is not invoiced for the purchase. This is especially important for employees who work onsite for a Company Name customer.</p>
</div>
</li>
</ul></div></div>
Here is the css for accordion. I downloaded this from an asset in Docebo University called Take Platform Design to the Next Level It was very helpful.
CSS
/* CUSTOM ACCORDION STARTS HERE */
.acc-item:checked ~ .acc-label .zmdi-chevron-down {display: none;}
.acc-item:checked ~ .acc-label .zmdi-chevron-up {display:inline;}
#custom-accordion label span {margin-right: 30px; display: block;}
#custom-accordion ul{list-style:none;margin:0;padding:0;}
#custom-accordion li{margin:0;padding:0; position: relative; border-bottom: 1px solid #e4e6e5;}
#custom-accordion .content{padding:0 20px;overflow:hidden;border:1px solid #fff;-webkit-transition:all .5s ease-out;-moz-transition:all .5s ease-out; position: relative; z-index: 2;}
.acc-style ul li{overflow:hidden;margin:0 0 1px;}
.acc-style ul li .content{height:0px;border-top:0;transition:all .5s ease-out;}
.acc-item:checked ~ .content{height:auto;}
.acc-item {cursor: pointer; position: absolute; opacity: 0; top: 0; left: 0; margin: 0; z-index: 1; width: 100%; height: 100%;}
.zmdi-chevron-up { display: none;}
#custom-accordion ul li { position: relative;}
/*Accordion Styles*/
.acc-style ul li label{padding: 10px 20px;}
#custom-accordion{background: #ffffff;}
.acc-label i{position: absolute; top: 10px; right: 15px; color: #0465ac; font-size: 25px;}
.noborder {border-bottom: 0px !important;}
#custom-accordion p{color:#333; margin:0 0 10px; line-height: 20px;}
#custom-accordion label{position: relative; display:block;font-size:16px;line-height:20px;color:#0465ac;font-weight:600;cursor:pointer;}
/* CUSTOM ACCORDION ENDS HERE */
Yes - here is the css for accordian. I downloaded this from an asset in Docebo University called Take Platform Design to the Next Level It was very helpful.
CSS
/* CUSTOM ACCORDION STARTS HERE */
.acc-item:checked ~ .acc-label .zmdi-chevron-down {display: none;}
.acc-item:checked ~ .acc-label .zmdi-chevron-up {display:inline;}
#custom-accordion label span {margin-right: 30px; display: block;}
#custom-accordion ul{list-style:none;margin:0;padding:0;}
#custom-accordion li{margin:0;padding:0; position: relative; border-bottom: 1px solid #e4e6e5;}
#custom-accordion .content{padding:0 20px;overflow:hidden;border:1px solid #fff;-webkit-transition:all .5s ease-out;-moz-transition:all .5s ease-out; position: relative; z-index: 2;}
.acc-style ul li{overflow:hidden;margin:0 0 1px;}
.acc-style ul li .content{height:0px;border-top:0;transition:all .5s ease-out;}
.acc-item:checked ~ .content{height:auto;}
.acc-item {cursor: pointer; position: absolute; opacity: 0; top: 0; left: 0; margin: 0; z-index: 1; width: 100%; height: 100%;}
.zmdi-chevron-up { display: none;}
#custom-accordion ul li { position: relative;}
/*Accordion Styles*/
.acc-style ul li label{padding: 10px 20px;}
#custom-accordion{background: #ffffff;}
.acc-label i{position: absolute; top: 10px; right: 15px; color: #0465ac; font-size: 25px;}
.noborder {border-bottom: 0px !important;}
#custom-accordion p{color:#333; margin:0 0 10px; line-height: 20px;}
#custom-accordion label{position: relative; display:block;font-size:16px;line-height:20px;color:#0465ac;font-weight:600;cursor:pointer;}
/* CUSTOM ACCORDION ENDS HERE */
+7I think this is the accordion look that I like best so far. Plus the panels are “sticky” so you don’t have to hold the mouse button to read them.
Perhaps next week I will share a write up on this one. It is much improved over the one I shared in the animation series.
Accordions seem to be a popular request.
+7
We created this Accordion:
We used CSS and HTML Widget and it is fully responsive
+6
Here’s what I want it to look like (unfortunately only working as an iframe)
Or if anyone else has ideas - we tried gstager’s and clicking the link collapses the accordion.
+6Ooo
any chance you’d be willing to share code?
+7If you take a look through the thread, there is a brief discussion of getting links to work using the solution I provided. I have not yet had a need to implement this myself but if you try it - I would be glad to hear more feedback on it. @Allan added a couple lines to the CSS which seems like that was all it took.
+7I did a quick test to verify that it does work just fine with links using the above tweak.
I should roll that into an overall update package.
I feel like a dunce here and I'm sure I'm missing something obvious, but why doesn't the HTML code work for me. I have created a page, and I'm using an HTML widget, but when i paste the sample code above all i get is this:
+7Which one are you using?
Did you implement both the CSS and matching HTML code?
If you made any changes to ID or class names - you’ll need to ensure that the HTML and CSS match.
My first guess is that there is a typo, mismatch, or other code block that is breaking things.
hi
The HTML i was copying was the sample in the ‘best answer’ post. I hadnt added the CSS and i have done that with the code from the same post and i now have it working (to a point).
However, I do actually prefer the accordian style from your post but don’t seem to be able to get it working. I tried using your code (HTML and CSS from your other post but it doesnt seem to work)
+7Glad you discovered the issue.
I would be happy to troubleshoot my contribution if you want to pursue that further. At the start I am going to lean towards some sort of typo or additional CSS that is interfering.
i dont know what happened but I just copied your CSS and HTML again and it all seems to be working so all good and thanks for replying.
Hi
Sorry that it took some time to get back at you but somehow I missed your reply. Yes, you can use our code, see below 😉
CSS:
/* CUSTOM ACCORDION STARTS HERE */
.acc-item:checked ~ .acc-label .zmdi-chevron-down {
display: none;
}
.acc-item:checked ~ .acc-label .zmdi-chevron-up {
display:inline;
}
#custom-accordion label span {
margin-right: 30px;
display: block;
}
#custom-accordion ul{
list-style:none;
margin:0;
padding:0;
}
#custom-accordion li{
margin:0;
padding:0;
position: relative;
border-bottom: 1px solid #e4e6e5;
}
#custom-accordion .content{
padding:0 20px;
overflow:hidden;
border:1px solid #fff;
-webkit-transition:all .5s ease-out;
-moz-transition:all .5s ease-out;
position: relative;
z-index: 2;
}
.acc-style ul li{
overflow:hidden;
margin:0 0 1px;
}
.acc-style ul li .content{
height:0px;
border-top:0;
transition:all .5s ease-out;
}
.acc-item:checked ~ .content{
height:auto;
}
.acc-item {
cursor: pointer;
position: absolute;
opacity: 0;
top: 0;
left: 0;
margin: 0;
z-index: 1;
width: 100%;
height: 100%;
}
.zmdi-chevron-up {
display: none;
}
#custom-accordion ul li {
position: relative;
}
/*Accordion Styles*/
.acc-style ul li label{
padding: 10px 20px;
}
#custom-accordion{
background: #ffffff;
}
.acc-label i{
position: absolute;
top: 10px;
right: 15px;
color: #eca900;
font-size: 25px;
}
.noborder {
border-bottom: 0px !important;
}
#custom-accordion p{
color:#333;
margin:0 0 10px;
line-height: 20px;
}
#custom-accordion label{
position: relative;
display:block;
font-size:16px;
line-height:20px;
color:#000;
font-weight:600;
cursor:pointer;
}
/* CUSTOM ACCORDION ENDS HERE */HTML:
<div id="custom-accordion" class="acc-style">
<ul><li>
<input class="acc-item" type="checkbox" id="item-1" name="item-accordion" value="" /><label class="acc-label"><span>1. I see a course that is locked with a lock. How can this be unlocked?</span><i class="zmdi zmdi-chevron-up"></i><i class="zmdi zmdi-chevron-down"></i></label>
<div class="content">
<p>You are enrolled in a sequential learning plan. You will need to complete the previous course before you can start this one.</p>
</div>
</li>
<li>
<input class="acc-item" type="checkbox" name="item-accordion" value="" /><label class="acc-label">2. I had to interrupt the course I started before I could finish it. Do I have to start the course over again?<i class="zmdi zmdi-chevron-up"></i><i class="zmdi zmdi-chevron-down"></i></label>
<div class="content">
<p>No. The courses automatically save the intermediate statuses. When you start the course again, you will be asked whether you want to start again at the point you last left off or whether you want to start the course from the beginning.</p>
</div>
</li>
<li>
<input class="acc-item" type="checkbox" name="item-accordion" value="" /><label class="acc-label">3. What happens if I don't pass a test?<i class="zmdi zmdi-chevron-up"></i><i class="zmdi zmdi-chevron-down"></i></label>
<div class="content">
<p>No problem! You can repeat a test as many times as it takes. By the way, how many times you needed is not recorded in any statistics. So no one will know how many attempts you needed.</p>
</div>
</li>
</ul></div>
+2Hello,
I don’t know much about HTML and CSS but from my understanding I can copy paste the code in HTML and if i want to change the look i have to go in branding and look and copy paste the CSS? But how can i make sure the right page with the right widget will be the one beeing updated?
Im not really sure to understand ? Thanks
Hi
every widget has an ID, so that you can target them with CSS.
Check here for more info: https://help.docebo.com/hc/en-us/articles/360020080720-Introduction-to-Pages-and-Menus
Cheers,
Johfra
+7Hello,
I don’t know much about HTML and CSS but from my understanding I can copy paste the code in HTML and if i want to change the look i have to go in branding and look and copy paste the CSS? But how can i make sure the right page with the right widget will be the one beeing updated?
Im not really sure to understand ? Thanks
There are a few examples of FAQ accordions here in the community. In many cases - the code is “page agnostic”. The CSS uses IDs that are unique to the accordion without affecting the rest of your platform and will only appear on the page where you reference those IDs with the HTML. So no need to dig for the ID of the page.
This is such great information! I am not very familiar with html/css so appreciate people willing to share! I’m being asked if I can add links in the answers, as well as images. I’m pretty sure links are possible, but what if we wanted a picture/screenshot. Is that even doable?
Enter your email address or username and password below to log in to Docebo Community. No account yet? Create an account
Enter your E-mail address. We'll send you an e-mail with instructions to reset your password.
