Horizontal Accordion Block

Description

change accordion block to horizontal accordion on Desktop
view demo – password: abc
buy me a coffee

#1. Install Code

#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

<!-- 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. Customize

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

breakpoint: 768,

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

#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>