Black Friday Sale! Get $20 off GP Premium, $40 off our new Lifetime license, and 45% off license renewals/extensions! Learn more

[Support request] Accordian

Home Forums Support Accordian

  • This topic has 3 replies, 3 voices, and was last updated 3 years ago by Leo.
Viewing 4 posts - 1 through 4 (of 4 total)
  • Author
    Posts
  • #417030
    Cheryl

    Hello

    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

    GP Premium 1.4.3
    #417107
    Andrew

    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 https://chooowai.github.io/woco-accordion/ 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');
    wp_enqueue_style('my-accordion');
    
    //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
    	wp_enqueue_script('my-accordion');
    	add_action('wp_footer', 'my_accordion_footer_action');
    }
    function my_accordion_footer_action() {
    	//js here ?>
    	<script>
    	jQuery( document ).ready(function() {
    		jQuery(".accordion").accordion();
    	});
    	</script>
    	<?php
    }
    
    /* 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>
    	<div>
    		Content 1<br>Content 1<br>Content 1<br>Content 1<br>
    	</div>
    	<h1>Section 2</h1>
    	<div>
    		Content 2<br>Content 2<br>Content 2<br>Content 2<br>
    	</div>
    	<h1>Section 3</h1>
    	<div>
    		Content 3<br>Content 3<br>Content 3<br>Content 3<br>
    	</div>
    </div>
    [my_accordion]
    

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

    #417133
    Cheryl

    Thank you, Andrew, I’m gonna try this right now 🙂

    #417154
    Leo
    Staff
    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.