Image Block Accordion

Description

• turn Image Block into Accordion Block
• view demo – password: abc
• buy me a coffee

#1. Install Code

#1.1. First, hover on top right of section where you use Image Blocks > Click EDIT SECTION

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

#1.3. Edit Image Block > ALT > enter text like this

• Text before # = Accordion Title
• Text after # = Accordion Content

Apple # Pioneering consumer technology, personal computing, and premium mobile devices

Microsoft # Empowering individuals and businesses through software, cloud platforms, and productivity tools

#1.4. Hover on Page where you use Image Blocks > Click Gear icon > Click Advanced > Paste this code

<!-- 10.26c01v1 Image Block Accordion -->
<script>
window.ImageBlockAccordionConfig = {
  sectionSelector: 'section[id*="image-block-accordion"]',
  separator: '#',
  titleTag: 'h4',
  descriptionClass: '',
  imageSpacing: '16px',
  initialOpen: false,
  arrowSize: '20px',
  arrowColor: '',
  lineColor: '',
  lineThickness: '1px',
  animationDuration: '0.35s'
};
</script>
<script src="https://code.beaverhero.com/imageblock/1026c01v1imageblockaccordion.js"></script>

#2. Customize

#2.1. To change Accordion Style, you can change this line 06

titleTag: 'h4',