CMS Development

Lowen68
参加者

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

解決

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 いいね!
1件の承認済みベストアンサー
Indra
解決策
ガイド役 | Elite Partner
ガイド役 | Elite Partner

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

解決

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

元の投稿で解決策を見る

4件の返信
Indra
ガイド役 | Elite Partner
ガイド役 | Elite Partner

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

解決

 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
参加者

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

解決

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 いいね!
Lowen68
参加者

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

解決

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

0 いいね!
Indra
解決策
ガイド役 | Elite Partner
ガイド役 | Elite Partner

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

解決

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