List Accordion Dropdown

Description

adding accordion dropdown to list simple
view demo – password: abc
buy me a coffee

#1. Install Code

#1.1. Make sure you use List Simple layout

#1.2. Edit each item description > add word with ## (code will change this to Accordion Dropdown Title, and text under it to Accordion Content)

Something like this

## Read Alexander's Bio

or like this

## Read Sophia's Bio

#1.3. Hover on Page where you use Simple List > Click Gear icon

#1.4. Click Advanced > Paste this code

If you use Personal/Basic Plan and your plan doesn’t support Injection, see #3.1

<!-- 07.26c21v3 List Accordion Dropdown -->
<script>
  window.ListAccordionConfig = {
    marker: '##',
    openFirst: false,
    spaceAbove: '1em',
    arrowSize: '8px',
    arrowThickness: '2px',
    duration: '300ms',
    divider: '1px solid currentColor',
    contentGap: '0.6em',
    failsafe: '2000ms'
  };
</script>
<script src="https://code.beaverhero.com/list/0726c21v3listdropdownaccordion.js">
</script>

#2. Customize

#2.1. To change space above accordion dropdown, change line 06

spaceAbove: '1em',

#2.2. To change divider color above accordion dropdown, change line 10

divider: '1px solid currentColor',

to something like this

divider: '1px solid #f1f',

#3. Other

#3.1. If you use Personal/Basic Plan and your plan doesn’t support Injection, you can edit current page (page where you use Simple List) > Add a Markdown Block

Add this code into Markdown

<script>
  window.ListAccordionConfig = {
    marker: '##',
    openFirst: false,
    spaceAbove: '1em',
    arrowSize: '8px',
    arrowThickness: '2px',
    duration: '300ms',
    divider: '1px solid currentColor',
    contentGap: '0.6em',
    failsafe: '2000ms'
  };
</script>
<script src="https://code.beaverhero.com/list/0726c21v3listdropdownaccordion.js">
</script>