[Support request] Accordian

[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

[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!

[Cheryl]

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

[Leo]

Thanks for sharing Andrew 🙂

[Author]

Posts