Warning - Long geeky post ahead!!
Lots of questions have come up surrounding accordions.
I’ve toyed around with these and shared a relatively simple example in my animation series.
I have since put together an FAQ accordion that I believe looks and functions well - at least in my environment. I have taken the CSS and heavily commented it for your ease of application to your own environments should you wish to make use of it. I’ve also added a short gif and some pictures so you can sort of see it in action.
The code provided is for exactly what you see in this post.
You’ll want to adjust as desired and test as usual for your environments.
Here is a picture in full, 2/3, and 1/3 size widgets.
Here is the CSS for your Branding and Look section
/** Sticky Accordion **/
/** Removes the little icon and positions your title for the box **/
#accord ul {
list-style: none;
padding: 0px;
margin: 0px;
}
/** Set background color as desired for the overall box and popout border **/
/** Set box-shadow as desired or remove **/
/** Width will be total amount of widget taken up - 90% looked good to me **/
#accord ul li {
position: relative;
overflow: hidden;
padding: 0px;
margin: auto;
width: 90%;
background: #AD122A;
box-shadow: 1px 1px 10px 1px #888888;
}
/** Set the spacing between each box **/
#accord ul li + li {
margin-top: 10px;
}
/** Set the spacing between your last box and the bottom of the widget **/
#accord ul li:last-of-type {
margin-bottom: 20px;
}
/** Positions the chevron at the far right of the box **/
/** Tweak the top and right values as desired **/
/** If you adjust the size of the chevron, you'll want to do top and right **/
#accord ul li i {
position: absolute;
transform: translate(-6px, 0);
margin-top: 15px;
right: 20px;
}
/** Sets the color and size of the chevron **/
/** A ratio of 1:3 of width to height works well **/
#accord ul li i:before, ul li i:after {
content: "";
position: absolute;
background-color: #ffffff;
width: 5px;
height: 15px;
}
/** If you adjust the width and height of your chevron, adjust the pixels **/
/** to keep them lined up or else they will look like an X **/
/** These will change the chevron when you open and close the boxes **/
#accord ul li i:before {
transform: translate(-4px, 0) rotate(45deg);
}
#accord ul li i:after {
transform: translate(4px, 0) rotate(-45deg);
}
#accord ul li inputitype=checkbox]:checked ~ i:before {
transform: translate(4px, 0) rotate(45deg);
}
#accord ul li inputitype=checkbox]:checked ~ i:after {
transform: translate(-4px, 0) rotate(-45deg);
}
/** This removes the checkbox and makes the entire box clickable **/
/** This also sets the cursor to be a pointy hand on hover **/
#accord ul li inputitype=checkbox] {
position: absolute;
cursor: pointer;
width: 100%;
height: 100%;
z-index: 1;
opacity: 0;
}
/** Sets the border width of the dropdown - adjust as desired **/
/** Sets the background color of the dropdown area - adjust as desired **/
/** padding should be adjusted based on margin width as desired **/
#accord ul li p {
margin: 2px;
background: #ece0ad;
padding: 10px;
}
/** This corrects the breadcrumb bar chevron malfunction caused by accordion **/
doc-layout-breadcrumbs .hierarchical-breadcrumbs ui-icon {
margin-right:10px;
}
/** Sets the title text color when the box is closed **/
/** Adjust this value as desired **/
#accord ul li inputitype=checkbox]:checked ~ h2 {
color: #ffffff;
}
/** Sets the title text color when the box is open **/
/** Sets positioning of the text in the box **/
/** Adjust values as desired **/
h2 {
margin: 5px 10px;
color: #ffffff;
}
/** Hides the dropdown text when box is closed **/
/** Transition gives a little time for the fade out - adjust as desired **/
#accord ul li inputitype=checkbox]:checked ~ p {
max-height: 0px;
transition: .5s;
opacity: 0;
}
/** This gives a little time for the fade in - adjust as desired **/
#accord ul li inputitype=checkbox] ~ p {
transition: .5s;
}
/** This styles the main title of the accordion - FAQ in this example **/
/** Adjust as desired **/
h1 {
margin: 5px 20px;
color: #000000;
}
Here is the HTML for your widget.
<div id="accord">
<h1>FAQ</h1>
<ul><li>
<input type="checkbox" checked="checked" value="" /><i></i>
<h2>How can I make a custom accordion for my widget?</h2>
<p>Start by reviewing the code in this post. You will need to place code in two separate places. One will be the CSS in the Branding and Look section and the other will be the HTML in your widget. Of course, you will want to make some adjustments to the text and possibly the color scheme as well. Be sure to read the code comments for guidance.</p>
</li>
<li>
<input type="checkbox" checked="checked" value="" /><i></i>
<h2>What if I want more than three boxes?</h2>
<p>Just copy and paste another li element in your HTML. Then you can change the h2 element for your question and the associated p element for the response.</p>
</li>
<li>
<input type="checkbox" checked="checked" value="" /><i></i>
<h2>Who is that Greg guy anyways? I keep seeing his name pop up.</h2>
<p>As a learning advocate, Greg believes in helping others to be more successful at what they do.</p>
</li>
<li>
<input type="checkbox" checked="checked" value="" /><i></i>
<h2>You mean this is really a fourth box!?</h2>
<p>Yes. Yes it is - and it was so easy to add it to my HTML.</p>
</li>
</ul>
</div>Hopefully this is useful for someone.
Have a great day!
