topic Re: Embed a module into blog text in Blog, Website & Page Publishing

Embed a module into blog text

NM4 — Fri, 22 Jan 2021 14:06:40 GMT

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.

Re: Embed a module into blog text

alyssamwilie — Sun, 24 Jan 2021 01:02:34 GMT

@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.

Re: Embed a module into blog text

NM4 — Mon, 25 Jan 2021 13:03:40 GMT

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?

Re: Embed a module into blog text

alyssamwilie — Mon, 25 Jan 2021 15:00:51 GMT

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.

Re: Embed a module into blog text

NM4 — Mon, 25 Jan 2021 15:10:35 GMT

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"> 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). Also, the last day of uncharged use of a container. </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"> 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. </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"> 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. </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"> Usage charge by the equipment owner (typically the carrier) for late return of containers. </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"> 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. </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"> 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. </dd> </dl> </div>

Thanks for the help!

Re: Embed a module into blog text

alyssamwilie — Mon, 25 Jan 2021 15:21:03 GMT

@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.

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;

Re: Embed a module into blog text

NM4 — Mon, 25 Jan 2021 17:12:49 GMT

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?