Custom Posts Accordion

This plugin creates Bootstrap accordion form custom posts.

Author:Darko Gerguric (profile at wordpress.org)
WordPress version required:4.9.8
WordPress version tested:5.3.3
Plugin version:1.0.0
Added to WordPress repository:01-09-2016
Last updated:03-02-2020
Warning! This plugin has not been updated in over 2 years. It may no longer be maintained or supported and may have compatibility issues when used with more recent versions of WordPress.
Rating, %:0
Rated by:0
Plugin URI:http://geniusworks.xyz
Total downloads:1 102
Active installs:10+
plugin download
Click to start download

This plugin creates a basic accordion from custom posts.
Fully compatible with WPML, just translate your posts and use shortcodes as explained below.
The plugin currently does not support Woocommerce.

How to use

  1. To use this plugin you need custom post registered.
    You may check Post Types to see how to do it.

Example from WP Codex – for testing, copy and paste code below to theme functions.php

  add_action( 'init', 'create_post_type' );
  function create_post_type() {
    register_post_type( 'Accordion',
      array(
        'labels' => array(
          'name' => __( 'Accordions' ),
          'singular_name' => __( 'Accordion' )
        ),
        'public' => true,
        'has_archive' => true,
      )
    );
  }
  1. Add shortcode to page or post where you want to use accordion

If you used code above to create custom posts type you would use following shortcode:

[gw_accordion post_type="Accordion"]

Optionally, you may add CSS class

[gw_accordion post_type="Accordion" class="my_css_class"]

You can also add code to your theme

<?php echo do_shortcode('[gw_accordion post_type="Accordion"');?>

or with the CSS class

<?php echo do_shortcode('[gw_accordion post_type="Accordion" class="my_css_class"]');?>

You also may set ordering, default is by ID and Ascending (ASC)

[gw_accordion post_type=”Accordion” class=”my_css_class” order_by=”title” order=”asc”]

Demo

  1. Check Demo

Known Issues

If your theme uses smooth scroll script like this one

        jQuery(function() {
      jQuery('a[href*="#"]:not([href="#"]').click(function() {
          if (location.pathname.replace(/^\//,'') == this.pathname.replace(/^\//,'') && location.hostname == this.hostname) {
          var target = jQuery(this.hash);
          target = target.length ? target : jQuery('[name=' + this.hash.slice(1) +']');
          if (target.length) {
            jQuery('html,body').animate({
              scrollTop: target.offset().top
            }, 2000);
            return false;
          }
        }

      });

    });

You may need to change this line

 jQuery('a[href*="#"]:not([href="#"]')

To look like this

 jQuery('a[href*="#"]:not([href="#"], a:not([data-toggle])')

to avoid conflict


FAQ
ChangeLog