WordPress.org
Get WordPress

Plugin Directory

Changeset 3492068


Ignore:
Timestamp:
03/26/2026 06:10:21 PM (5 days ago)
Author:
ryhowa
Message:

Update to 1.2.0: Replace jQuery accordion with vanilla JavaScript, add usage instructions

Location:
faq-accordion-schema/trunk
Files:
5 edited

Legend:

Unmodified
Added
Removed

  • faq-accordion-schema/trunk/app/Accordion.php

    r3363351 r3492068  
    2222    public function faqasc_render_accordion($atts, $content = null) {
    2323
    24         wp_enqueue_script('fqaas', Plugin::init()->getUrl('assets/js/accordion.js'), ['jquery'], Plugin::init()->getFileVersion('assets/js/accordion.js'), true);
     24        wp_enqueue_script('fqaas', Plugin::init()->getUrl('assets/js/accordion.js'), [], Plugin::init()->getFileVersion('assets/js/accordion.js'), true);
    2525        $enable_schema = (bool) get_option('fqaas_enable_schema', 1);
    2626        $style_mode    = (string) get_option('fqaas_theme_styles', 'override');

  • faq-accordion-schema/trunk/assets/css/accordion.css

    r3364015 r3492068  
    6363  margin-bottom: 1rem;
    6464}
     65.faq-accordion .accordion-content.is-open {
     66  display: flex;
     67}
    6568.faq-accordion .accordion-content-inner {
    6669  all: unset;

  • faq-accordion-schema/trunk/assets/js/accordion.js

    r3364054 r3492068  
    1 jQuery(function ($) {
    2     function toggleItem($header) {
    3         const $acc       = $header.closest('.faq-accordion');
    4         const $content   = $header.next('.accordion-content');
    5         const $icon      = $header.find('.accordion-icon');
    6         const isExpanded = $header.attr('aria-expanded') === 'true';
     1(function () {
     2    function toggleItem(header) {
     3        var acc = header.closest('.faq-accordion');
     4        var content = header.nextElementSibling;
     5        var icon = header.querySelector('.accordion-icon');
     6        var isExpanded = header.getAttribute('aria-expanded') === 'true';
    77
    8         const $allHeaders  = $acc.find('.accordion-header');
    9         const $allContents = $acc.find('.accordion-content');
     8        // Close all other panels
     9        acc.querySelectorAll('.accordion-header').forEach(function (h) {
     10            if (h === header) return;
     11            h.setAttribute('aria-expanded', 'false');
     12            h.classList.remove('active');
     13            var hIcon = h.querySelector('.accordion-icon');
     14            if (hIcon) hIcon.classList.remove('rotated');
     15        });
     16        acc.querySelectorAll('.accordion-content').forEach(function (c) {
     17            if (c === content) return;
     18            c.setAttribute('aria-hidden', 'true');
     19            c.classList.remove('is-open');
     20        });
    1021
    11         $allHeaders.not($header)
    12             .attr('aria-expanded', 'false')
    13             .removeClass('active')
    14             .find('.accordion-icon').removeClass('rotated');
    15 
    16         $allContents.not($content)
    17             .stop(true, true)
    18             .slideUp(300, function () {
    19                 $(this).css('display', 'none').attr('aria-hidden', 'true').removeClass('is-open');
    20             });
    21 
     22        // Toggle current panel
    2223        if (isExpanded) {
    23             $header.attr('aria-expanded', 'false').removeClass('active');
    24             $icon.removeClass('rotated');
    25             $content.stop(true, true).slideUp(300, function () {
    26                 $(this).css('display', 'none').attr('aria-hidden', 'true').removeClass('is-open');
    27             });
     24            header.setAttribute('aria-expanded', 'false');
     25            header.classList.remove('active');
     26            if (icon) icon.classList.remove('rotated');
     27            content.setAttribute('aria-hidden', 'true');
     28            content.classList.remove('is-open');
    2829        } else {
    29             $header.attr('aria-expanded', 'true').addClass('active');
    30             $icon.addClass('rotated');
    31             $content
    32                 .attr('aria-hidden', 'false')
    33                 .stop(true, true)
    34                 .slideDown(300, function () {
    35                     $(this).css('display', 'flex').addClass('is-open');
    36                 });
     30            header.setAttribute('aria-expanded', 'true');
     31            header.classList.add('active');
     32            if (icon) icon.classList.add('rotated');
     33            content.setAttribute('aria-hidden', 'false');
     34            content.classList.add('is-open');
    3735        }
    3836    }
    3937
    40     $(document).on('click', '.faq-accordion .accordion-header', function (e) {
    41         e.preventDefault();
    42         toggleItem($(this));
     38    document.addEventListener('click', function (e) {
     39        var header = e.target.closest('.faq-accordion .accordion-header');
     40        if (header) {
     41            e.preventDefault();
     42            toggleItem(header);
     43        }
    4344    });
    4445
    45     $(document).on('keydown', '.faq-accordion .accordion-header', function (e) {
     46    document.addEventListener('keydown', function (e) {
    4647        if (e.key === 'Enter' || e.key === ' ') {
    47             e.preventDefault();
    48             toggleItem($(this));
     48            var header = e.target.closest('.faq-accordion .accordion-header');
     49            if (header) {
     50                e.preventDefault();
     51                toggleItem(header);
     52            }
    4953        }
    5054    });
    51 });
     55})();

  • faq-accordion-schema/trunk/faq-accordion-schema.php

    r3364054 r3492068  
    77 * Automatically builds the accordion by simply including headings and text withing the shortcode.
    88 * Includes options to enable/disable schema markup, add custom styles, and choose whether to override or respect theme styles.
    9  * Version: 1.1.2
     9 * Version: 1.2.0
    1010 * Author: Ryan Howard
    1111 * Author URI: https://www.ryanhoward.dev

  • faq-accordion-schema/trunk/readme.txt

    r3397459 r3492068  
    55Tested up to: 6.8.3
    66Requires PHP: 7.2
    7 Stable tag: 1.1.3
     7Stable tag: 1.2.0
    88License: GPLv2 or later
    99License URI: http://www.gnu.org/licenses/gpl-2.0.html
    … …  
    2727✅ Automatically builds the accordion
    2828
     29== How to Use ==
     30
     31The plugin automatically creates an accordion from your content. Just wrap your FAQ content in the shortcode — use `<h2>` or `<h3>` tags for questions and `<p>` tags for answers. The plugin handles the rest.
     32
     33`[faq_accordion]`
     34`<h3>Question here</h3>`
     35`<p>Answer here</p>`
     36
     37`<h3>Another question</h3>`
     38`<p>Another answer</p>`
     39`[/faq_accordion]`
     40
     41Each heading becomes a collapsible accordion item and the text below it becomes the answer. FAQ schema markup is added automatically.
    2942
    3043== Installation ==
    … …  
    8295== Changelog ==
    8396
     97= 1.2.0 =
     98* Replaced jQuery-based accordion with vanilla JavaScript for faster page loads
     99* Removed jQuery as a dependency — the plugin no longer requires or enqueues jQuery
     100* Added usage instructions to the plugin description
     101
    84102= 1.1.2 =
    85103* Added js changes
Note: See TracChangeset for help on using the changeset viewer.