James Accordion Test

Demo 1 (HTML) 

• Accordion Tab 1
• Accordion Tab 2
• Accordion Tab 3

This version uses HTML and requires editing of contents through source code. Where it does improve on the versions that Velocity did when importing our old content is that it now opens the specified accordion tab when the link is clicked. This is a nice improvement, but doesn't solve the problem of making contents easily editable through the Hubspot GUI.

One positive of this is that I can supply this in a format where you just need to copy and paste provided HTML once and copy some styling styling to the page's header. (Although now that I have access to Hubspot, I can set the articles up myself rather than send you HTML.)

A potential downside is that the styles won't automatically update if the site's colours and fonts are changed in future in a redesign. Although updates to this will have to be done manually, they can be done quite easily by replacing the styling code in the page's header, which is also an improvement on the way the Velocity imported accordion's work. 

Demo 2 (Individual Hubspot accordions)

• Accordion tab 4
• Accordion tab 5
• Accordion tab 6

This version uses the Hubspot accordion function, but it doesn't allow for tagging of individual accordion tabs. This means each tab must be its own accordion, which requires more space between tabs. While this allows for use of the easier Hubspot GUI, it still requires source code editing to add the tags. (I've since learnt how to insert anchors through GUI)  Aside from using more space, the downside of this format is that all the accordion contents and titles need to be individually added and you can't just do a copy and paste of supplied HTML. (This probably isn't an issue as I can now set up articles directly on Hubspot.)

Demo 3 (Grouped Hubspot accordions)

Accordion tab 7 

Accordion tab 8

Accordion tab 9

I haven't added anchors to this one, but have included it for comparison to show how the accordions look when they have multiple tabs (which can't be anchored) compared to the extra spacing using individual accordions above). This format can work well for cases where there are just a small number of accordion tabs that are related (eg as done in the Accounting Skyscraper) but not so well for linking to long FAQs and getting extra SEO links.  

New Hubspot FAQ Accordion test

Accordion tab 10