Archive for jQuery

How To Use Classic Accordion In WordPress

Classic Accordion is a jQuery plugin that allows you to easily create accordion panels. It costs $6 and can be bought from codecanyon.

One of the members of unofficial WebDesign.com Skype chat group shared it with me so I can show him how to get it working in WordPress.

Live Demo:

Here’s how I set it up:

1) Extracted the downloaded accordion_fluid.zip file and uploaded its contents under /assets/grid-accordion in my site’s root.

Screen Shot 2013-02-15 at 8.48.39 PM

jquery-1.6.1.min.js need not be uploaded as WordPress includes jQuery.

2) Added the following in child theme’s functions.php:

// load javascript in footer
add_action('wp_enqueue_scripts', 'add_my_code');

function add_my_code() {
	wp_enqueue_script( 'classicAccordion', get_bloginfo('wpurl') . '/assets/grid-accordion/js/jquery.classicAccordion.fluid.js', array('jquery'), '1.0', true );

    wp_enqueue_style( 'classic-accordion', get_bloginfo('wpurl') . '/assets/grid-accordion/css/classic-accordion.css' );
    wp_enqueue_style( 'accordion_fluid', get_bloginfo('wpurl') . '/assets/grid-accordion/css/style.css' );

    add_action( 'print_footer_scripts', 'my_footer_script' );
}

// Add jQuery to footer

function my_footer_script() { ?>
    <script type="text/javascript">

    	var accordion;

        jQuery(function($) {

            $('.grid-accordion').classicAccordion({width:'100%', height:'100%', slideshow:true});            

        });
    </script>
<?php }

3) Added the following at the end of child theme’s style.css:

.grid-accordion-container {
	height: 354px;
	margin-bottom: 1em;
}

ul.grid-accordion {
	margin-left: 0;
}

In the above, 354px is the height of smallest (height-wise) image amongst the ones that are going to be shown in the accordion.

4) Added this HTML code in this Post:

<div class="grid-accordion-container">
<ul class="grid-accordion">
    <li>
        <img src="http://websitesetuppro.com/assets/grid-accordion/images/1.jpg" />
    </li>
    <li>
        <img src="http://websitesetuppro.com/assets/grid-accordion/images/2.jpg" />
    </li>
    <li>
        <img src="http://websitesetuppro.com/assets/grid-accordion/images/3.jpg" />
    </li>
    <li>
        <img src="http://websitesetuppro.com/assets/grid-accordion/images/4.jpg" />
    </li>
    <li>
        <img src="http://websitesetuppro.com/assets/grid-accordion/images/5.jpg" />
    </li>
    <li>
        <img src="http://websitesetuppro.com/assets/grid-accordion/images/6.jpg" />
    </li>
    <li>
        <img src="http://websitesetuppro.com/assets/grid-accordion/images/7.jpg" />  
    </li>
    <li>
        <img src="http://websitesetuppro.com/assets/grid-accordion/images/8.jpg" />
    </li>
    <li>
        <img src="http://websitesetuppro.com/assets/grid-accordion/images/9.jpg" />
    </li>
</ul>
</div>

That's it!