Offering effective calls-to-action is a key driver for a successful website, so it’s imperative to make sure that these focal points are free from distractions. Here at Inturact, we noticed that our comments form seemed to take up quite a bit of space at the bottom of our blog posts, detracting from our more important call-to-actions. Instead of re-styling this form to be less intrusive, we decided to put it in a dropdown to hide the comment, unless the reader was interested in viewing them or submitting one of their own. To quickly implement this on our own site, we modified a blueprint tutorial from Codrops called Nested Accordions to fit our needs. By utilizing the provided markup and files to build a solution around our comments section of the blog post template in the Design Manager, we were able to achieve the desired effect. You can view a demo of the comments at the bottom of our blogs here.

Let’s Get Started

To start you will need to download the source files here.

Upload the JS Files

After downloading the source files, you will need to place each of the files into the correct locations in HubSpot. Let’s start with the js folder. You will need to upload these to your file manager so that we can reference them later.

Upload Font Icon Files

Next, upload the fonts to the file manager so they can be referenced in the CSS files.  You only need to include the “icomoon_arrows” folder, as they will be referenced for the dropdown icon arrows next to the titles. The fontawesome files are used in the page but not in the accordion, so they aren’t needed.

Create CSS File

Create a new CSS file in the design manager under Coded Files and paste in the contents of the components.css file. You will need to edit this file, so go ahead and leave it open. Don’t worry about the default.css file as it is more for the tutorial page layout and not the accordion itself.  Once the component.css file is open and ready, you will need to change the reference url’s for each of the icomoon files at the top of the file to the new url of the file you uploaded earlier.  You can get the url from the file manager by clicking the gear on the right side of the file and selecting “Get file URL.”

The code on our site (showing the URLs from our File Manager) is as follows. Use this as a guide for modifying your own code.

/* Icon font for arrow icons */

@font-face {

 font-family: 'icomoon';

 src:url('http://www.inturact.com/hs-fs/hub/333468/file-1941712431-eot/icomoon_arrows/icomoon.eot');

 src:url('http://www.inturact.com/hs-fs/hub/333468/file-1941712431-eot/icomoon_arrows/icomoon.eot?#iefix') format('embedded-opentype'),

 url('http://www.inturact.com/hs-fs/hub/333468/file-1941712436-woff/icomoon_arrows/icomoon.woff') format('woff'),

 url('http://www.inturact.com/hs-fs/hub/333468/file-1937891353-ttf/icomoon_arrows/icomoon.ttf') format('truetype'),

 url('http://www.inturact.com/hs-fs/hub/333468/file-1939753874-svg/icomoon_arrows/icomoon.dev.svg#icomoon') format('svg');

 font-weight: normal;

 font-style: normal;

} /* Iconfont by Icomoon http://icomoon.io/ */

If there is any CSS overwriting your current site CSS, you can modify this file to meet your needs.

Referencing Files in Content Settings

Once you have all of your files uploaded and in place, you we will need to place a couple lines of code in the header and footer of the blog content settings by going to Content > Content Settings > Blog.

From here, make sure you are editing the correct blog if you have multiple blogs, and scroll down until you see the Header HTML for Blog Listing Pages. Place in the reference URL to your modernizr.custom.js. Again, as a guide, our code looks like this:

<script src="http://www.inturact.com/hs-fs/hub/333468/file-1941274562-js/js/accordion/modernizr.custom.js"></script>

In the Footer HTML for Blog Listing Pages, place the below script and change the reference URL for the file .cbpNTAccordionmin.js to your own reference URL from the File Manager:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
        <script src="{{ get_public_template_url("custom/page/Inturact_Theme2/jquery.cbpNTAccordion.min.js") }}"></script>

     <script>
       $( function() {
          /*
          - how to call the plugin:
          $( selector ).cbpNTAccordion( [options] );
          - destroy:
          $( selector ).cbpNTAccordion( 'destroy' );
          */

          $( '#cbp-ntaccordion' ).cbpNTAccordion();

        } );

    </script>

With the reference scripts in place, go into your blog post template and open the CSS Options of the Blog Subscription module.

Place the following markup into the Custom Wrapping HTML (advanced) section:

<div class="container">
<div class="main">
<ul id="cbp-ntaccordion" class="cbp-ntaccordion">
<li>
<h3 class="cbp-nttrigger">View & Submit Comments</h3>
<div class="cbp-ntcontent">
<p> {{ html }} </p>
</div>
</li>
</ul>
</div>
</div>

When done properly, it will look like this:

Feel free to adjust the title “View & Submit Comments” to suit your own site. Once this is done, you are ready to test! 

For implementing Accordions in your site you can use this same code throughout your site or check another great tutorial called Creating Accordions On Your COS Pages.