Squarespace Accordion 2 Columns

[tuanphan]

Description

• split accordion content to 2 columns, 3 columns, 4 columns

#1.1. Add text with symbol: ##break

Something like this

so code can break it to 2 columns

or something like this

so code can break it to 3 columns

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

#1.3. Click Advanced > Paste this code

• If you use Personal/Basic Plan and your plan doesn’t support Injection, see #3.1
• You can also use this Accordion FAQ widget to create accordion into Squarespace, so you can adjust style easier.

<!-- 07.26c28v6 Accordion 2 Columns -->
<script>
window.AccordionColumnsConfig = {
  fullWidth: true,
  breakMarker: '##break',
  maxColumns: 4,
  columnGap: '40px',
  columnMinWidth: '220px'
};
</script>
<script src="https://code.beaverhero.com/accordion/0726c28v6accordion2columns.js"></script>

#2. Customize

some style options (line 06 – line 08)

maxColumns: 4,
columnGap: '40px',
columnMinWidth: '220px'

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

<script>
window.AccordionColumnsConfig = {
  fullWidth: true,
  breakMarker: '##break',
  maxColumns: 4,
  columnGap: '40px',
  columnMinWidth: '220px'
};
</script>
<script src="https://code.beaverhero.com/accordion/0726c28v6accordion2columns.js"></script>