Embed a module into blog text

[NM4]

Hi there,

I have created a module that works as an accordion. (https://codepen.io/pen?template=mdrYeqg)

And I want to put this module inbetween the text on my blog.

How do I go about doing this.

I tried taking the usage snippet and embedding it into the text but that didnt work.

Please let me know.

[alyssamwilie]

@NM4 Hmm, wasn't expecting it to be set up the way it is, but if you remove the js-accordionTrigger class from the accordion titles and instead put it in a span around the text that should change it to have only the text clickable.

<dt>
  <a href="#accordion1" aria-expanded="false" aria-controls="accordion1" class="accordion-title accordionTitle">
    <span class="js-accordionTrigger">＋ What is Last Free Day (LFD)?</span>
  </a>
</dt>

and since we've moved it a layer in we'll want to add a parentNode property to the thisAnswer/thisQuestion variables in the javascript so it's still locating the correct elements.

var thisAnswer = e.target.parentNode.parentNode.nextElementSibling;
var thisQuestion = e.target.parentNode;

[NM4]

Almost @alyssamwilie ! It works like I want it to thanks! However, when clicking on the box its moves the page down to where the child node would be. How do I fix this?

Also, I just added the '+' symbol before the text, where do I add it in the css to make it show up before the text rather than in it?

[alyssamwilie · Accepted solution]

@NM4 The usage snippet is for placing modules into coded templates and cannot be used in rich text. Also, blogs currently don't support drag and drop or flex columns (though they are working on adding this https://community.hubspot.com/t5/HubSpot-Ideas/Flexible-Column-in-Blog-Posts/idi-p/20603) so at this time the only way you'd be able to add this module to your blog post is by adding it directly to the template in the design manager. 

[NM4]

Thanks for the response @alyssamwilie , I managed to embed it into the css and its looks great! One questions though, im not great with CSS so hopefully you can help.

It works well on desktop, being able to cick on any part of the row and the accordion opens. But on mobile it takes up the entire page, and when trying to scroll down it is very annoying. So, how do I edit the css to make the text the only clickable part?

[alyssamwilie]

Hi @NM4 , the clicking functionality would actually be taking place in the javascript. Would it be possible for you to paste the HTML and JS code from the module here? That would make it easier to give you exact instructions for updating it.

[NM4]

Hi @alyssamwilie,

Here is the java,

//uses classList, setAttribute, and querySelectorAll
//if you want this to work in IE8/9 youll need to polyfill these
(function(){
	var d = document,
	accordionToggles = d.querySelectorAll('.js-accordionTrigger'),
	setAria,
	setAccordionAria,
	switchAccordion,
  touchSupported = ('ontouchstart' in window),
  pointerSupported = ('pointerdown' in window);
  
  skipClickDelay = function(e){
    e.preventDefault();
    e.target.click();
  }

		setAriaAttr = function(el, ariaType, newProperty){
		el.setAttribute(ariaType, newProperty);
	};
	setAccordionAria = function(el1, el2, expanded){
		switch(expanded) {
      case "true":
      	setAriaAttr(el1, 'aria-expanded', 'true');
      	setAriaAttr(el2, 'aria-hidden', 'false');
      	break;
      case "false":
      	setAriaAttr(el1, 'aria-expanded', 'false');
      	setAriaAttr(el2, 'aria-hidden', 'true');
      	break;
      default:
				break;
		}
	};
//function
switchAccordion = function(e) {
  console.log("triggered");
	e.preventDefault();
	var thisAnswer = e.target.parentNode.nextElementSibling;
	var thisQuestion = e.target;
	if(thisAnswer.classList.contains('is-collapsed')) {
		setAccordionAria(thisQuestion, thisAnswer, 'true');
	} else {
		setAccordionAria(thisQuestion, thisAnswer, 'false');
	}
  	thisQuestion.classList.toggle('is-collapsed');
  	thisQuestion.classList.toggle('is-expanded');
		thisAnswer.classList.toggle('is-collapsed');
		thisAnswer.classList.toggle('is-expanded');
 	
  	thisAnswer.classList.toggle('animateIn');
	};
	for (var i=0,len=accordionToggles.length; i<len; i++) {
		if(touchSupported) {
      accordionToggles[i].addEventListener('touchstart', skipClickDelay, false);
    }
    if(pointerSupported){
      accordionToggles[i].addEventListener('pointerdown', skipClickDelay, false);
    }
    accordionToggles[i].addEventListener('click', switchAccordion, false);
  }
})();

---

and the html:

<div class="accordion">
<dl>
<dt><a href="#accordion1" aria-expanded="false" aria-controls="accordion1" class="accordion-title accordionTitle js-accordionTrigger">＋ What is Last Free Day (LFD)?</a></dt>
<dd id="accordion1" class="accordion-content accordionItem is-collapsed" aria-hidden="true">
<p>The last day of uncharged storage time for a container to clear customs and be picked up from the terminal (varies by terminal, carrier, and forwarder).</p>
<p>Also, the last day of uncharged use of a container.</p>
</dd>
<dt><a href="#accordion2" aria-expanded="false" aria-controls="accordion2" class="accordion-title accordionTitle js-accordionTrigger"> ＋ What is Demurrage?</a></dt>
<dd id="accordion2" class="accordion-content accordionItem is-collapsed" aria-hidden="true">
<p>Storage charge by the equipment owner (typically the carrier) for containers remaining at the terminal after the last free day. Charges per day generally increase over time.</p>
</dd>
<dt><a href="#accordion3" aria-expanded="false" aria-controls="accordion3" class="accordion-title accordionTitle js-accordionTrigger"> ＋ What is Port Storage?</a></dt>
<dd id="accordion3" class="accordion-content accordionItem is-collapsed" aria-hidden="true">
<p>Similar to demurrage but charged by the terminal instead of the equipment owner. A container in a shipment can incur all of demurrage, <a href="https://www.shippingandfreightresource.com/difference-between-storage-and-demurrage/">port storage</a> and detention charges.</p>
</dd>
<dt><a href="#accordion3" aria-expanded="false" aria-controls="accordion3" class="accordion-title accordionTitle js-accordionTrigger"> ＋ What is Detention/Per Diem?</a></dt>
<dd id="accordion3" class="accordion-content accordionItem is-collapsed" aria-hidden="true">
<p>Usage charge by the equipment owner (typically the carrier) for late return of containers.</p>
</dd>
<dt><a href="#accordion3" aria-expanded="false" aria-controls="accordion3" class="accordion-title accordionTitle js-accordionTrigger"> ＋ What is Trucker Detention?</a></dt>
<dd id="accordion3" class="accordion-content accordionItem is-collapsed" aria-hidden="true">
<p>Another form of detention, being an hourly rate fee applied by trucking companies after a given free time for loading or unloading at pickup or delivery.</p>
</dd>
<dt><a href="#accordion3" aria-expanded="false" aria-controls="accordion3" class="accordion-title accordionTitle js-accordionTrigger"> ＋ What is Pre-pulling?</a></dt>
<dd id="accordion3" class="accordion-content accordionItem is-collapsed" aria-hidden="true">
<p>A charge for storing a container at a yard, typically near the port or importer’s distribution center. The storage charge (also known as ground or quay rent) is cheaper than port storage or demurrage but will not avoid detention fees.</p>
</dd>
</dl>
</div>

Thanks for the help!