Black Friday sale! Get up to 25% off GP Premium! Learn more ➝

[Support request] Accordian

Home Forums Support [Support request] Accordian

Home Forums Support Accordian

Viewing 4 posts - 1 through 4 (of 4 total)
  • Author
  • #417030


    Any advice or recommendations on a lightweight accordion, I’ve noticed this topic has been answered a few times, however, I’m wondering if there are any more updated thoughts on this matter, we would prefer to use a CSS/JS as opposed to a plug-in – also where is the best place to put the JS snippet.

    Thanks in advance


    This is what we have done in the past to add a GitHub project to our WordPress without creating a full blown plugin…

    I’m using the Woco Accordion jQuery script because it’s lightweight as requested and uses jQuery which is already used by most WordPress sites. It’s demo is at and here’s how to add it to WP without a plugin… trying to be complete but let me know if I missed something πŸ™‚

    1) Download the script. You can “View on GitHub” from that page and then “Clone or Download” and “Download ZIP”
    2) Copy that to your child theme.
    3) Copy this code to your functions.php file. This shows you how to both reference a JS file (for the accordion) and add your own to the footer (with add_action)

    /* Add Accordion Project from GitHub */
    //add css - this adds it on whole site or you can put lines in the shortcode function below but that can cause flashing of all content before page load is complete because that moves the CSS to the footer :(
    wp_register_style('my-accordion', get_stylesheet_directory_uri().'/woco-accordion-master/woco-accordion.min.css');
    //add shortcode and function to use on pages with accordion
    add_shortcode('my_accordion', 'my_accordion_func');
    function my_accordion_func() {
    	//add js only when shortcode is used
    	wp_register_script('my-accordion', get_stylesheet_directory_uri().'/woco-accordion-master/woco.accordion.min.js', array('jquery'));	//add js and tell it to load jquery if not already loaded
    	add_action('wp_footer', 'my_accordion_footer_action');
    function my_accordion_footer_action() {
    	//js here ?>
    	jQuery( document ).ready(function() {
    /* End Add Accordion Project from GitHub */

    4) Create a WP page and use this code in the Text view to test it out… the [my_accordion] shortcode will add the JS to that page in the right spots and using the “class=”accordion”” in the HTML will activate the accordion.

    <div class="accordion">
    	<h1>Section 1</h1>
    		Content 1<br>Content 1<br>Content 1<br>Content 1<br>
    	<h1>Section 2</h1>
    		Content 2<br>Content 2<br>Content 2<br>Content 2<br>
    	<h1>Section 3</h1>
    		Content 3<br>Content 3<br>Content 3<br>Content 3<br>

    5. Edit the content to fit your needs and add any options from the plugin demo page!


    Thank you, Andrew, I’m gonna try this right now πŸ™‚

    Customer Support

    Thanks for sharing Andrew πŸ™‚

Viewing 4 posts - 1 through 4 (of 4 total)
  • You must be logged in to reply to this topic.