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

SOLVE
Lowen68
Participant

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 Upvotes
1 Accepted solution

Accepted Solutions
Indra
Solution
Top Contributor | Diamond Partner

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

 


Bureau Vet

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

View solution in original post

2 Replies 2
Indra
Solution
Top Contributor | Diamond Partner

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

 


Bureau Vet

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

View solution in original post

Lowen68
Participant

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

0 Upvotes