Is anybody else having issues with the HubSpot Accordion Toggle module?

[FinnJ]

My buddy and I are building a landing page for a client and one of the modules is the free HubSpot Accordion Toggle. My buddy modified the accordion and it worked perfectly in the preview template. However, when I implemented the accordion into a template for my landing page, published said template, and tried to see if it worked in the draft of the landing page. Needlesstosay, I tried clicking on the accordion toggles and nothing dropped down.

A couple of questions have come to mind as we have been working to diagnose this problem:

1. Is this an issue to do with the code itself?

2. Is it an issue having to do with both the code and landing page?

3. Is there an issue with the design template and landing page?

I appreciate any and all assistance. Thanks, all!

[tjoyce]

Sounds like a JS error occurred somewhere on the page and it's blocking the dropdown code. Can we see a preview link to help you debug?

---

tim@belch.io

[FinnJ]

Hey @tjoyce, I appreciate your diagnosis.

Here's a preview link of the page itself:

http://info.governmentmarketinguniversity.com/awards-test?hs_preview=FOCybqxK-5867551769

Here's the individual preview of the accordion:

https://app.hubspot.com/design-previewer/2624055/modules/5901691167

Appreciate any help you can provide.

[tjoyce · Accepted solution]

Thanks for the preview @FinnJ. The HTML you have included in the page for the accordion, does not match the JS script that's controlling the accordion. Are you sure you're using the right accordion custom module? The html structure should look like this (tested and working with your current JS):

<div class="accordion">
    	<div class="accordion_group">
            <div class="accordion_header">HEADER 1</div>
            <div class="accordion_content">
                 ACCORDION CONTENT FOR SECTION 1
            </div>         
        </div>
    	<div class="accordion_group">
            <div class="accordion_header">HEADER 2</div>
            <div class="accordion_content">
                 ACCORDION CONTENT FOR SECTION 2
            </div>
            
        </div>
    	<div class="accordion_group">
            <div class="accordion_header">HEADER 3</div>
            <div class="accordion_content">
                 ACCORDION CONTENT FOR SECTION 3
            </div>
            
        </div>
    </div>

---

tim@belch.io

[FinnJ]

Thanks, @tjoyce. So would you say the JS error is in the landing page itself as opposed to the accordion module? I'll forward your comment to my buddy to compare the coding scripts. 

[tjoyce]

@FinnJ

I wouldn't say it's a JS error at this point. The html just isn't formatted the correct way. It's hard to tell if it's on the template level or module level without investigating the code of the custom module. You could test that it works by dropping the html I gave you into an HTML module in the Design Manager builder. That might help you continue to debug.