BrightLeaf Digital Code Snippet Library

Check out our growing library of code snippets for Gravity Forms!

Mobile Accordion Shortcode

GOAL

Creates a mobile-friendly accordion component that parses nested divs into collapsible sections. Supports nested shortcodes and allows only one section to be open at a time.

CONFIGURATION

CSS: Add styles for .mobile-accordion-wrapper, .accordion-section, .accordion-label, .accordion-content
CSS: Define .open and .visible classes for active states
Structure: Content must follow specific format (see usage below)

USAGE

[mobile_accordion]
<div>
<div>Section 1 Title</div>
<div>Section 1 content goes here...</div>
</div>
<div>
<div>Section 2 Title</div>
<div>Section 2 content goes here...</div>
</div>
[/mobile_accordion]

NOTES

First section opens by default
Supports nested shortcodes

https://raw.githubusercontent.com/Eitan-brightleaf/snippets/main/Mobile%20Accordion%20Shortcode.php

Install Using Code Snippets

This code is best installed directly on your site using the Code Snippets plugin.

Check Out the Code

Loading...