Creating an FAQ Page via HTML & CSS (accordion)

<!-- 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>

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