I did but had to do it via HTML coding - would love a better way!

Hello @fsahin and @simone.yaghi I had to do it via HTML coding as well.  In case your are new to HTML, here is a stripped down version of one of our FAQs.  You can copy/paste it into your sandbox instance and then edit as needed.  I tried to remove our company name and links so it should get your started.  The answers are specific to things we selected so you can change those as well.  

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 */

Here is how @gstager approached this using CSS and html.  Pretty cool and helpful!

@Sdinnoce thank you!

@simone.yaghi can you provide the custom css you used with that html to make the accordion work?

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 */

@Annarose.Peterson - thanks for the shout out.

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

Here is the write-up that I promised

We created this Accordion:

We used CSS and HTML Widget and it is fully responsive

@Johfra does your accordion perhaps allow clickable links within the text? I’m trying to accordion the following:

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.

Hi @lrodman,

yes it allows Hyperlinks ;-)

Cheers,

Johfra

Ooo

any chance you’d be willing to share code? 

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

I 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:

@KTJD - There is more than one example flowing from this thread.

Which 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 @gstager .

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)

@KTJD 

Glad 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 @lrodman,

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>

Hello,

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 @julientrudel,

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

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.

It worked thank you everyone.

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?