FluentCommunity Course Toggle (Collapsible Section) – Shortcode Snippet

fluentcommunity-course-toggle-shortcode.php

<?php

/**
 * FluentCommunity Course Toggle (Collapsible Section) – Shortcode Snippet
 *
 * This snippet adds a simple collapsible / toggle (accordion-style) section
 * to FluentCommunity course lessons using a shortcode.
 *
 * ----------------------
 * Usage:
 *
 * Add the shortcode inside your course lesson content:
 *
 * [fc_toggle title="Class Summary"]
 * Your summary content here...
 * [/fc_toggle]
 *
 * [fc_toggle title="Transcript"]
 * Your transcript content here...
 * [/fc_toggle]
 *
 * ----------------------
 * Open By Default:
 *
 * [fc_toggle title="Class Summary" open="yes"]
 * This section will be open by default.
 * [/fc_toggle]
 *
 */



// Register Toggle Shortcode
add_shortcode('fc_toggle', function ($atts, $content = null) {

    $atts = shortcode_atts([
        'title' => 'Read more',
        'open'  => 'no',
    ], $atts, 'fc_toggle');

    $title = esc_html($atts['title']);
    $open  = strtolower($atts['open']) === 'yes' ? ' open' : '';

    return '
    <div class="fc-course-toggle-wrap">
        <details class="fc-course-toggle"' . $open . '>
            <summary>' . $title . '</summary>
            <div class="fc-course-toggle-content">' . wpautop(do_shortcode($content)) . '</div>
        </details>
    </div>';
});

// Add CSS
add_action('wp_head', function () {
    ?>
    <style>
        .fc-course-toggle-wrap {
            margin: 16px 0;
        }

        .fc-course-toggle {
            border: 1px solid #e5e7eb;
            border-radius: 8px;
            background: #fff;
            margin-bottom: 12px;
            overflow: hidden;
        }

        .fc-course-toggle summary {
            cursor: pointer;
            padding: 14px 16px;
            font-weight: 600;
            background: #f9fafb;
            list-style: none;
            position: relative;
        }

        .fc-course-toggle summary::-webkit-details-marker {
            display: none;
        }

        .fc-course-toggle summary:after {
            content: '+';
            position: absolute;
            right: 16px;
            font-size: 20px;
        }

        .fc-course-toggle[open] summary:after {
            content: '-';
        }

        .fc-course-toggle-content {
            padding: 16px;
            line-height: 1.6;
            color: #374151;
        }
    </style>
    <?php
});