Code Nation
Candidate (English)
Candidate (English)
  • Your Code Nation Theme
  • Getting started
    • Creating a new site
    • Activating your new theme
    • Editing your theme
  • Launching 🚀
    • Connect a Broadcaster
    • Connect your social media icons
    • Connect Google Analytics
    • SEO and sharing
    • Add a favicon
    • Add a logo
    • Add a featured image
    • Add footer text
    • Order your navbar
    • Configure your page and site settings
  • General Features
    • Control Panel Shortcuts
    • Creating new pages
    • Tags
    • Donation Express Payments
  • Candidate Theme Features
    • Background Video Section
    • Background Quote Section
    • Collapsed Accordions
    • Covering donation fees
    • Custom Field Inputs
    • Donation Panel
    • Embedding External Tools/Plugins
    • Events Map
    • Featured Blog Post
    • Feature Video
    • Image Gallery
    • Latest News Section
    • Nav Buttons
    • PDF Gallery (Resources page)
    • Event Program Layout
    • Share Bar
    • Show Subpages
    • Show Profile Page
    • Signup Bar
    • SMS Tool
    • Two Column Content
    • Video Gallery
    • Tag Appendix
  • Tips
    • Image sizes and dimensions
  • Feedback
    • Candidate Docs Feedback Form
Powered by GitBook
On this page

Was this helpful?

  1. Candidate Theme Features

Collapsed Accordions

Accordions provide a seamless way to organize collapsible items that can be toggled open with a single click, greatly enhancing your page's user experience (UX).

PreviousBackground Quote SectionNextCovering donation fees

Last updated 1 year ago

Was this helpful?

Live Demo:

What is an accordion?

Adding a Collapsed Accordion:

  1. Navigate to the basic content field of a page you want the accordion to display and add 2 horizontal lines (<hr>) above the start of where you want the the accordion to show.

  2. Continue building the accordion by repeating the pattern of separating headings from content using 2 horizontal lines (<hr>). E.g.

  1. Save the content and preview the result.

To alternate the background color and headings of the accordion using your theme colors, add the 'Admin Colored Accordion' tag to the tags list for the page featuring the accordion content. This tag will dynamically style the accordion headers and panels, creating an alternating color scheme based on your theme's color palette.

https://campaign.codenation.com/donation_v2
How to add an accordion inside a pages content
How to add an accordion inside a pages content