CMS Development

Lowen68
Participant

Possible to use the accordion toggle module in Hubspot email templates?

Résolue

Hi All,

 

I'm building a customer newsletter email, and rather than including links in the email that go to separate areas of our website, I'd like to include a short excerpt of each section that can be expanded within the email if the recipient wants to learn more. 

I downloaded the accordion toggle module from the marketplace because I thought that I could add this to an email template in Hubspot, but this appears to not be the case. Is this possible and I'm just missing something? Or is there another module that I should be using? 

 

Thank you,

Lisa

0 Votes
1 Solution acceptée
Indra
Solution
Guide | Partenaire solutions Elite
Guide | Partenaire solutions Elite

Possible to use the accordion toggle module in Hubspot email templates?

Résolue

Hi @Lowen68,

 

The accordion is used for website pages since most of them use javascript to toggle the items. You could build a basic accordion yourself only with the use of CSS.

 

I have a basic example setup that you could use and style like you want.

The example can be found over here: https://codepen.io/ind88/pen/oNwPPaM

 

HTML

<div class="tabs">
  <div class="tab">
    <input class="tab__input" type="radio" name="options" id="option1" checked="checked">
    <label for="option1">
      <div class="tab__title">Option 1</div>
      <div class="tab__content">Content 1 Lorem ipsum dolor sit amet consectetur adipisicing elit. Tempora, esse.</div>
    </label>
  </div>
  <div class="tab">
    <input class="tab__input" type="radio" name="options" id="option2">
    <label for="option2">
      <div class="tab__title">Option 2</div>
      <div class="tab__content">Content 2 Lorem ipsum dolor sit amet consectetur adipisicing elit. Ad asperiores quod nobis ut sunt est! Magnam voluptates ipsa asperiores sit?</div>
    </label>
  </div>
  <div class="tab">
    <input class="tab__input" type="radio" name="options" id="option3">
    <label for="option3">
      <div class="tab__title">Option 3</div>
      <div class="tab__content">Content 3 Lorem ipsum, dolor sit amet consectetur adipisicing elit. Aspernatur maxime rerum quasi itaque eveniet sed.</div>
    </label>
  </div>
</div>

 

CSS

.tabs{
  max-width:400px;
  margin:50px auto;
  font-family:sans-serif;
  font-size:16px;
  line-height:1.4;
}

.tab{
  border:1px solid #222;
}
.tab + .tab{
  margin-top:10px;
}

.tab__input {
  display: none;
}
.tab__content {
  padding:10px;
  display: none;
  border-top:1px solid #222;
}
.tab__input:checked + label .tab__title{
  background:#ececec;
}
.tab__input:checked + label .tab__content{
  display:block;
}
.tab__title{
  padding:10px;
  font-weight:bold;
  cursor:pointer;
}

 


Vet Digital - The Growth Agency | HubSpot Solutions Partner Agency

Did my post solve your question? Help the community by marking it as a solution

Voir la solution dans l'envoi d'origine

4 Réponses
Indra
Guide | Partenaire solutions Elite
Guide | Partenaire solutions Elite

Possible to use the accordion toggle module in Hubspot email templates?

Résolue

 Hi @HJohnson

 

The sample module is used for webpages, not mailing. 

For email you should avoid javascript. Also it's best to inline your css markup since not all css options are supported in all email clients.

 

Perhaps you can get this demo work:

https://codepen.io/ind88/pen/vYeYVGO


Vet Digital - The Growth Agency | HubSpot Solutions Partner Agency

Did my post solve your question? Help the community by marking it as a solution
HJohnson
Participant

Possible to use the accordion toggle module in Hubspot email templates?

Résolue

When I tried to use the custom CSS via creating a custom module, when I selected emails - it gave me a message that javascript and CSS will be unavailable. When I tried to use the HTML code it only gave me radial buttons instead of the interactive accordians? What am I doing wrong?

0 Votes
Lowen68
Participant

Possible to use the accordion toggle module in Hubspot email templates?

Résolue

Thank you for sharing, Indra!  I will give this a try.

0 Votes
Indra
Solution
Guide | Partenaire solutions Elite
Guide | Partenaire solutions Elite

Possible to use the accordion toggle module in Hubspot email templates?

Résolue

Hi @Lowen68,

 

The accordion is used for website pages since most of them use javascript to toggle the items. You could build a basic accordion yourself only with the use of CSS.

 

I have a basic example setup that you could use and style like you want.

The example can be found over here: https://codepen.io/ind88/pen/oNwPPaM

 

HTML

<div class="tabs">
  <div class="tab">
    <input class="tab__input" type="radio" name="options" id="option1" checked="checked">
    <label for="option1">
      <div class="tab__title">Option 1</div>
      <div class="tab__content">Content 1 Lorem ipsum dolor sit amet consectetur adipisicing elit. Tempora, esse.</div>
    </label>
  </div>
  <div class="tab">
    <input class="tab__input" type="radio" name="options" id="option2">
    <label for="option2">
      <div class="tab__title">Option 2</div>
      <div class="tab__content">Content 2 Lorem ipsum dolor sit amet consectetur adipisicing elit. Ad asperiores quod nobis ut sunt est! Magnam voluptates ipsa asperiores sit?</div>
    </label>
  </div>
  <div class="tab">
    <input class="tab__input" type="radio" name="options" id="option3">
    <label for="option3">
      <div class="tab__title">Option 3</div>
      <div class="tab__content">Content 3 Lorem ipsum, dolor sit amet consectetur adipisicing elit. Aspernatur maxime rerum quasi itaque eveniet sed.</div>
    </label>
  </div>
</div>

 

CSS

.tabs{
  max-width:400px;
  margin:50px auto;
  font-family:sans-serif;
  font-size:16px;
  line-height:1.4;
}

.tab{
  border:1px solid #222;
}
.tab + .tab{
  margin-top:10px;
}

.tab__input {
  display: none;
}
.tab__content {
  padding:10px;
  display: none;
  border-top:1px solid #222;
}
.tab__input:checked + label .tab__title{
  background:#ececec;
}
.tab__input:checked + label .tab__content{
  display:block;
}
.tab__title{
  padding:10px;
  font-weight:bold;
  cursor:pointer;
}

 


Vet Digital - The Growth Agency | HubSpot Solutions Partner Agency

Did my post solve your question? Help the community by marking it as a solution