CMS Development

choltzman
Participant

Styling the accordion Module

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 | Elite Partner
Recognized Expert | Elite Partner

Styling the accordion Module

@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

Styling the accordion Module

0 Upvotes
tjoyce
Recognized Expert | Elite Partner
Recognized Expert | Elite Partner

Styling the accordion Module

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

Styling the accordion Module

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 | Elite Partner
Recognized Expert | Elite Partner

Styling the accordion Module

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

Styling the accordion Module

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 | Elite Partner
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.

0 Upvotes