I have two accoridons on my page set to display on screen sizes of 700px or smaller in place of the Tabber moddule. I want to style the second accordion (accordion, pictured) to match the styling of the second tabber module (pictured). I want each tab of the accordion to be a different colour as well as the background of the content inside the accordion. However I can't figure out how to isolate each accordion's tab label and content.
Here is my code (HUBL, HTML and CSS):
{####################################
HubSpot Accordion Module
#####################################
This module was provided as an easy
to implement option for users, and
also serves as a simple example for
developers to learn from & work with.
#-----------------------------------#}
<div class="hs-accordion-erp" {% if module.max_1_open %}data-sync="true"{% endif %}> {# << Should only one accordion be open at a time? #}
{% for accordion in module.accordions %} {# << Loop through the accordians group #}
<div class="hs-accordion-erp__item" aria-expanded="{% if accordion.open_by_default %}true{% endif %}"> {# << Should this accordion be open on page load? #}
<button>
{{ accordion.title }}
<span class="hs-accordion-erp__item-icon"></span>
</button>
<main>
<div class="hs-accordion-erp__item-content">
{{ accordion.content }}
</div>
</main>
</div>
{% endfor %}
</div>
.hs-accordion-erp__item {
margin: .5em;
}
/* Accordion Label*/
.hs-accordion-erp__item button {
display: block;
width: 100%;
font-size: 1em;
padding: 1em;
cursor: pointer;
border: 0 none;
border-bottom: 1px solid #ddd;
border-radius: 0;
/* Accordion Label Background Color*/
background-color: pink;
/* Accordion Label Background Image
background-image: url("https://www.baass.com/hs-fs/hubfs/BAASS.com_/Fereshta/location-halifax-bedford-300x150.jpg?t=1530903465843&width=300&name=location-halifax-bedford-300x150.jpg");
background-size:cover;
min-height:100px;*/
-webkit-appearance: none;
color: #fff;
position: relative;
text-align: left;
font-family: Arial;
font-weight: bold;
}
.hs-accordion-erp__item:last-of-type button {
border-bottom-color: transparent;
}
.hs-accordion-erp__item button:focus {
outline: none;
}
.hs-accordion-erp__item button:hover {
color: #00b9d6;
opacity: .8;
}
.hs-accordion-erp__item[aria-expanded=true] button { /* [aria-expanded=true] means accordion will be 'open' */
color: #00b9d6;
border-bottom-color: #00b9d6;
}
.hs-accordion-erp__item-icon { /* Icon styles */
position: absolute;
height: 1.25em;
width: 1.25em;
right: 1em;
top: 50%;
-webkit-transform: translateY(-50%);
-ms-transform: translateY(-50%);
transform: translateY(-50%);
border: 1px solid #a5a5a5;
border-radius: 50%;
-webkit-transition: all .2s ease-in;
-o-transition: all .2s ease-in;
transition: all .2s ease-in;
pointer-events: none;
}
.hs-accordion-erp__item-icon:before {
content: "";
position: absolute;
top: 50%;
left: 50%;
-webkit-transform: translate(-50%,-50%);
-ms-transform: translate(-50%,-50%);
transform: translate(-50%,-50%);
height: 1px;
width: .75em;
background-color: #a5a5a5;
}
.hs-accordion-erp__item-icon:after {
content: "";
position: absolute;
top: 50%;
left: 50%;
-webkit-transform: translate(-50%,-50%);
-ms-transform: translate(-50%,-50%);
transform: translate(-50%,-50%);
height: .75em;
width: 1px;
background-color: #a5a5a5;
}
.hs-accordion-erp__item button:hover .hs-accordion__item-icon {
border-color: #00b9d6;
}
.hs-accordion-erp__item button:hover .hs-accordion__item-icon:before,
.hs-accordion-erp__item button:hover .hs-accordion__item-icon:after {
background-color: #00b9d6;
}
.hs-accordion-erp__item[aria-expanded=true] .hs-accordion__item-icon {
-webkit-transform: translateY(-50%) rotate(135deg);
-ms-transform: translateY(-50%) rotate(135deg);
transform: translateY(-50%) rotate(135deg);
border-color: #00b9d6;
background-color: #333;
}
.hs-accordion-erp__item[aria-expanded=true] .hs-accordion__item-icon:before,
.hs-accordion-erp__item[aria-expanded=true] .hs-accordion__item-icon:after,
.hs-accordion-erp__item[aria-expanded=true] button:hover .hs-accordion__item-icon:before,
.hs-accordion-erp__item[aria-expanded=true] button:hover .hs-accordion__item-icon:after {
background-color: #fff;
}
.hs-accordion-erp__item main {
opacity: 0;
max-height: 0;
overflow: hidden;
background:#fff;
-webkit-transition: opacity .3s ease-out .2s, max-height .3s ease-out;
-o-transition: opacity .3s ease-out .2s, max-height .3s ease-out;
transition: opacity .3s ease-out .2s, max-height .3s ease-out;
line-height: 1.6;
/*display: none;*/
}
.hs-accordion-erp__item[aria-expanded=true] main {
opacity: 1;
max-height: 100%;
-webkit-transition: opacity .5s ease-in, max-height .5s ease-in;
-o-transition: opacity .5s ease-in, max-height .5s ease-in;
transition: opacity .5s ease-in, max-height .5s ease-in;
/*display: block;*/
}
.hs-accordion-erp__item-content {
background:#fff;
padding: 2em 1em 1.5em;
}
.hs-accordion-erp__item-content p {
margin-top: 0;
}
@choltzman - If you can link us to the preview, we can give you a very specific answer. I'm thinking either n-th child selectors or a jquery loop to add classes.
If the only thing changing on the accordion is the background color of each accordion item, you can leave the rest of your code AS-IS and drop the code I gave you at the bottom of your CSS file. That CSS is meant to be just a background override for individual accordion items. Also, I updated my original answer to also include changing the background of the content,
Jul 25, 20184:03 PM - edited Jul 26, 201810:29 AM
Recognized Expert | Elite Partner
Styling the accordion Module
@choltzman They weren't working for me either when I was looking at your page before implementing the fix. I'm pretty sure that's an unrelated problem.