Squarespace Horizontal Accordion Block

[tuanphan]

To change accordion block to horizontal accordion on Desktop like this.

#1.1. Hover on top right of section where you use Accordion > Click EDIT SECTION

#1.2. at Design > Anchor Link > enter word: horizontal-accordion

#1.3. Hover on Page where you use Accordion Block > Click Gear icon

#1.4. Click Advanced > Paste this code

• If you use Personal/Basic Plan and your plan doesn’t support Injection, you can see #3.1
• If you want to control more style, layout…without adjusting complex code, you can also use this free FAQ tool to add accordion

<!-- 07.26c05v5 Horizontal Accordion Block -->
<script>
window.HorizontalAccordionConfig = {
  sectionId: "horizontal-accordion",
  breakpoint: 768,
  expandFirstItem: true,
  preventCollapseActive: true,
  tabGap: "10px",
  tabTextAlign: "center",
  tabPadding: "16px 10px",
  inactiveTabOpacity: 0.5,
  activeLineThickness: "2px",
  contentPaddingTop: "30px",
  contentWidth: "100%"
};
</script>
<script src="https://code.beaverhero.com/accordion/0726c05v5horizontalaccordion.js"></script>

#2.1. To make horizontal accordion on both desktop, mobile, you can change Line 05

breakpoint: 768,

to

breakpoint: 1,

#2.2. Other style (Line 08 – Line 14)

tabGap: "10px",
tabTextAlign: "center",
tabPadding: "16px 10px",
inactiveTabOpacity: 0.5,
activeLineThickness: "2px",
contentPaddingTop: "30px",
contentWidth: "100%"

#3.1. If you use Personal/Basic Plan and your plan doesn’t support Injection, you can add a Markdown Block under Accordion Block.

Then add this code into Markdown

<script>
window.HorizontalAccordionConfig = {
  sectionId: "horizontal-accordion",
  breakpoint: 768,
  expandFirstItem: true,
  preventCollapseActive: true,
  tabGap: "10px",
  tabTextAlign: "center",
  tabPadding: "16px 10px",
  inactiveTabOpacity: 0.5,
  activeLineThickness: "2px",
  contentPaddingTop: "30px",
  contentWidth: "100%"
};
</script>
<script src="https://code.beaverhero.com/accordion/0726c05v5horizontalaccordion.js"></script>