Skip to content
C9 WordPress Plugins + Themes
Search
  • C9 Starter Theme
    • Theme Overview
    • dropdown-divider
    • View All 50+ Templates
    • Block Pattern: Style Guide
    • Block Pattern: Events Schedule
    • Block Pattern: Podcast Episode
    • Block Pattern: Artist Linktree
    • Block Pattern: 450 Word Article
    • WooCommerce Shop
    • Posts Page
    • Post Header Large Photo
    • Post With Photo Gallery
    • Post Comments
    • 404 Error
    • Search Results
  • C9 Blocks
    • Installing C9 Blocks
    • C9 Blocks Style Guide
    • C9 Blocks Plugin Overview
    • C9 Blocks Animation Plugin
    • Development Guide
  • C9 Admin Dashboard
  • Docs
    • Setup Guide
    • Building Landing Pages From Scratch
    • Building Landing Pages From Templates
    • Using Reusable Block Layouts
    • Customizing C9 Starter Theme
  • Search

C9 Toggles

 Overview

Toggle blocks are a great place to store answers to questions, directions to an event, or additional information about a product or service. C9 Toggles block has a small and a large style

Selecting the parent toggle container

When hovering over the outer edges of the toggles you should see a dashed selector display like in the screen shot, clicking on this will select the outer Toggle element and display the settings you see below.

Toggling/opening individual toggles

Clicking on the square “opened” toggle button like you see below, or clicking on the arrows will open the toggle items in the blocks editor window. Users can select the entire toggle heading to open the toggles on the frontend.

Toggle Settings

Toggles

Styles

Tabs come in a Default (large) and a Small style each with their own design styles when expanded or collapsed. We use FontAwesome icons for the toggle icons.

Advanced

HTML Anchor

If you have ever wanted to link directly to a section on the page, you can add in a CSS ID here such as “page-section-media” and then use a direct anchor link to yoursite.com/page-name/#page-section-media and be taken directly to the top of your anchor item.

Very helpful for creating on-page navigation with multiple sections on a page.

Additional CSS Class

Add a custom CSS class for additional styling or customization.

Toggles Settings Walk-through Video

Seeing someone go through the settings is easier than reading through documentation.

Documentation

  • C9 Starter Theme Sample Content
  • C9 Blocks Plugin Installation
  • C9 Blocks Development
  • Creating Landing Pages from Reusable Blocks
  • Creating Landing Pages from Block Templates
  • Building from Scratch with C9 Grid Blocks

Get Help

  • Documentation
  • Community Forum
  • C9 Admin Dashboard Plugin
  • C9 Blocks Plugin
  • C9 Starter Theme

Follow Us

  • Company
  • LinkedIn
  • Facebook
  • Instagram
  • Twitter
TwitterInstagramYouTubeGitHub

© 2024 C9. WordPress website design by COVERT NINE

Search for: