Section Accordion

Description

• adding accordion with regular sections
• view demo – password: abc
• buy me a coffee

#1. Install Code

Suppose we have 7 sections and need to group them into 2 Accordions: First Accordion (3 sections) – Second Accordion (4 sections). You can follow these steps

#1.1. Hover on top right of 7 sections > Click EDIT SECTION

#1.2. With first 3 sections

at Anchor Link > enter word: section-acc-v1-01, section-acc-v1-02, section-acc-v1-03

#1.2-2. Similar with second 4 sections

section-acc-v2-01, section-acc-v2-02, section-acc-v2-03, section-acc-v2-04

#1.3. Hover on Page where you use these sections > Click Gear icon > Click Advanced > Paste this code

<!-- 10.26c15v1 Section Accordion -->
<script>
window.SectionAccordionConfig = {
  groups: [
    {
      prefix: 'section-acc-v1-',
      titles: [
        'Accordion V1 — Item 1',
        'Accordion V1 — Item 2',
        'Accordion V1 — Item 3'
      ],
      activeItem: 0
    },
    {
      prefix: 'section-acc-v2-',
      titles: [
        'Accordion V2 — Item 1',
        'Accordion V2 — Item 2',
        'Accordion V2 — Item 3',
        'Accordion V2 — Item 4'
      ],
      activeItem: 0
    }
  ],

  allowMultipleOpen: false,

  background: '#ffffff',
  textColor: '#000000',
  border: '1px solid #dddddd',

  paddingDesktop: '10px 4vw',
  paddingMobile: '10px 6vw',

  titleSizeDesktop: '28px',
  titleSizeMobile: '22px',
  titleWeight: '400',

  arrowSize: '24px',
  duration: 350
};
</script>
<script src="https://code.beaverhero.com/accordion/1026c15v1sectionaccordion.js"></script>

#1.4. You can change Accordion Title text here

Line 07 – Line 11

titles: [
        'Accordion V1 — Item 1',
        'Accordion V1 — Item 2',
        'Accordion V1 — Item 3'
      ],

Line 16 – Line 21

titles: [
  'Accordion V2 — Item 1',
  'Accordion V2 — Item 2',
  'Accordion V2 — Item 3',
  'Accordion V2 — Item 4'
],

#1.5. Other style options in Line 26 – Line 40

allowMultipleOpen: false,

background: '#ffffff',
textColor: '#000000',
border: '1px solid #dddddd',

paddingDesktop: '10px 4vw',
paddingMobile: '10px 6vw',

titleSizeDesktop: '28px',
titleSizeMobile: '22px',
titleWeight: '400',

arrowSize: '24px',
duration: 350