Styling the accordion Module

choltzman
Participant

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. 

accordion.PNGSecond.PNG

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; 
}

 

7 Replies 7
tjoyce
Recognized Expert | Platinum Partner

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

0 Upvotes
choltzman
Participant
0 Upvotes
tjoyce
Recognized Expert | Platinum Partner

No problem, thanks for the link

You could use the nth child selector for css changes to specific accordion tabs

.hs-accordion-erp .hs-accordion-erp__item:nth-child(1) button, .hs-accordion-erp .hs-accordion-erp__item:nth-child(1) .hs-accordion-erp__item-content {background-color:green;}
.hs-accordion-erp .hs-accordion-erp__item:nth-child(2) button, .hs-accordion-erp .hs-accordion-erp__item:nth-child(2) .hs-accordion-erp__item-content  {background-color:blue;}
.hs-accordion-erp .hs-accordion-erp__item:nth-child(3) button, .hs-accordion-erp .hs-accordion-erp__item:nth-child(3) .hs-accordion-erp__item-content  {background-color:red;}

If this answer helped, please, mark as solved 😄


tim@belch.io | forms.belch.io | Design your own Beautiful HubSpot Forms; No coding necessary.

 

Drop by and say Hi to me on slack.

0 Upvotes
choltzman
Participant

How exactly do i implement nth child innthe css. do I just use the 3 lines or do i have to apply it to every single class? 

 

ie: 

 

/* Accordion Label ERP*/
.hs-accordion-erp__item:nth-child(1) 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 ERP */
    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:nth-child(1):last-of-type button {
    border-bottom-color: transparent;
}
.hs-accordion-erp__item:nth-child(1) button:focus {
    outline: none;
}
.hs-accordion-erp__item:nth-child(1) button:hover {
    color: #00b9d6;
    opacity: .8;
}
.hs-accordion-erp__item:nth-child(1)[aria-expanded=true] button {   /* [aria-expanded=true] means accordion will be 'open' */
    color: #00b9d6;
    border-bottom-color: #00b9d6;
}
.hs-accordion-erp__item:nth-child(1)-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:nth-child(1)-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:nth-child(1)-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:nth-child(1) button:hover .hs-accordion__item-icon {
    border-color: #00b9d6;
}
.hs-accordion-erp__item:nth-child(1) button:hover .hs-accordion__item-icon:before,
.hs-accordion-erp__item:nth-child(1) button:hover .hs-accordion__item-icon:after {
    background-color: #00b9d6;
}
.hs-accordion-erp__item:nth-child(1)[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:nth-child(1)[aria-expanded=true] .hs-accordion__item-icon:before,
.hs-accordion-erp__item:nth-child(1)[aria-expanded=true] .hs-accordion__item-icon:after,
.hs-accordion-erp__item:nth-child(1)[aria-expanded=true] button:hover .hs-accordion__item-icon:before,
.hs-accordion-erp__item:nth-child(1)[aria-expanded=true] button:hover .hs-accordion__item-icon:after {
    background-color: #fff;   
}
.hs-accordion-erp__item:nth-child(1) 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:nth-child(1)[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:nth-child(1)-content {
  background:#fff;
    padding: 2em 1em 1.5em;
}
.hs-accordion-erp__item:nth-child(1)-content p {
 		margin-top: 0; 
}
0 Upvotes
tjoyce
Recognized Expert | Platinum Partner

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,

0 Upvotes
choltzman
Participant

It worked but now my accordions don't open. Neither of them. 

 

https://www.baass.com/seafood_v5?hs_preview=cpInhehh-5990585734

 

 

tjoyce
Recognized Expert | Platinum Partner

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

0 Upvotes