This is how the output code looked like before:

<h1>Some title</h1>
<div class="accordion-content">Some text.</div>

With the latest redesign of one of my projects, I thought of a far better way to solve this issue. Now, the reusable accordion menu code is completely customizable with the WordPress editor and CSS.

Let’s start with the HTML. This is what we want the shortcode to produce.

<div class="accordion-title">
	<h1>Some title</h1>
</div>
<div class="accordion-content">Some text.</div>

I am still using an <h#>-tag in the code, but now it is wrapped in a div with a class of accordion-title. This means that in the jQuery code, we now can target the div instead of the specific <h#>-tag.

Let’s now look at the code inside the accordion.js file.

jQuery(document).ready(function($){

    var expandhide_text = '<span> </span>';
    $('.accordion-content').hide().prev().append(expandhide_text).addClass('accordionhidden');

    $('.accordion-title').click(function() {
        $(this).toggleClass('accordionvisible').toggleClass('accordionhidden').next().toggle();
        return false;
    });

});

This code is what’s left from the one I used in earlier projects. First, the variable expandhide_text is defined as a span with a non-breaking space as content. In the example, this span is basically only used to place the little black triangle and change between the one pointing down when the content is hidden and the one pointing left when the content is displayed. The following code first hides the content (when the page is loaded) and applies a class of accordionhidden to the content. Then, on a click event on the div with a class of accordion-title (the one with the <h#>-tag inside), the content is made visible and the class of accordionhidden is exchanged by the class accordionvisible. When the accordion-title div is clicked again, the classes for the content are swapped again and the content is invisible.

So how are we going to achieve to make this work with WordPress-backend customizable shortcodes? It’s not very difficult either. The following code goes into the functions.php file in your theme folder.

//Shortcode for accordion
function accordion( $atts, $content = null ) {
	extract(shortcode_atts(array(
		'hclass' => '3',
		'title' => 'This is the accordion header',
	), $atts));

return '<div><h' .$hclass. '>' . do_shortcode($title) . '</h' .$hclass. '></div><div>' . do_shortcode($content) . '</div>';
}
add_shortcode('accordion', 'accordion');

If you’re not very familiar with what’s happening in this code, I will explain it to you. First, you define the function accordion and attach an array of attributes to it. There are two attributes: hclass and title. hclass defines which header tag will go inside the accordion-header div (hclass = # in <h#>). This attibute has an  arbitrary default value of 3. The title attribute, which defaults to “This is the accordion header”, specifies the title of the accordion in the shortcode. The shortcode outputs everything that is wrapped in return ‘…’;

.$hclass. returns the value hclass value –> e.g. hclass=”2″ returns <h2> and </h2>

.do_shortcode($title). returns the title value –> e.g. title=”Fancy Accordion”

.do_shortcode($content). returns everything that is places between [accordion] and [/accordion]

What’s the difference between .$content. and .do_shortcode($content).? If you only use one shortcode in your post, then there is no difference between those two. If you, however, want to nest multiple shortcodes, then you have to add the do_shortcode() bit to the attribute in the return section of the code. If you want to read more about this, please go to the function Reference/do shortcode of the WordPress codex.

We’re almost there. The only thing that’s still missing is the necessary CSS.

.accordion-title {
    cursor: pointer;
    position: relative;
    border-top: 1px solid #333;
    background: #eee;
}
.accordion-title:hover { color: #C2125E; }
.accordion-title .accordionhidden .expand { display: inline; }
.accordion-title .accordionhidden .hide { display: none; }
.accordion-title .accordionvisible .expand { display: none; }
.accordion-title .accordionvisible .hide { display: inline; }
.accordionhidden span, .accordionvisible span {
    position: absolute;
    right: 3%;
    top: 35%;
    width: 16px;
    height: 16px;
    text-indent: -9999px;
}
.accordionhidden span { background: transparent url(images/triangle-down.png) no-repeat; }
.accordionvisible span { background: transparent url(images/triangle-left.png) no-repeat; }
.accordion-content {
    font: normal normal normal 1em/1.4em Arial, sans-serif;
    color: #333;
    margin: 10px 0 10px 8px;
}

The styling is of course completely up to you. Only the styles for accordionhidden and accordionvisible shouldn’t be changed as they define when the content is visible and when not.

So go ahead and use the code on your own site and customize it to your needs. This was my first post of this kind and I hope you liked it. Leave me a comment below and tell me what you think. I’ll be happy to further improve the accordion. Thank you for reading!

References

• Expand/Hide accordion feature explained / tobias.baethge.com
• Accordion Madness / learningjquery.com
• WordPress shortcode API / wordpress.org
• Function Reference/do shortcode / wordpress.org

During my 2010 study-abroad semester at the University of Canterbury in Christchurch, I took a bus into Lyttelton and hiked via Lyttelton Scenic Reserve and Bridle Path back to the Christchurch Gondola Station on the city side of the Port Hills. On that day, I took the pictures below to which I later applied a tilt shift effect with Photoshop. This article is titled “Tribute to Lyttelton” for a good reason.

On September 4th, 2010 at 4:35 am local time, the Canterbury region was struck by a 7.1 magnitude earthquake. Despite widespread damage in Christchurch and the surrounding area, luckily, there were no fatalities to report which were directly related to the earthquake. Authorities said that this was mainly due to the time the quake hit – most people were off the streets asleep at their homes. Aftershocks continued to rattle the Canterbury region and especially Christchurch and its suburbs.

The largest aftershock so far – and I hope it won’t get worse – happened on Feburary 22, 2011 when a magnitude 6.3 earthquake struck the Canterbury region at 12:51 pm. It was centred 2 kilometres west of the town of Lyttelton, and 10 kilometres south-east of the centre of Christchurch. Unfortunately, this aftershock hit the city in the middle of a busy working day. Many (historic) buildings in the CBD and Christchurch’s suburbs were damaged beyond repair or completely collapsed. Sadly, 181 people lost their lives.

Another magnitude 6.3 earthquake rattled the shaken city of Christchurch on June 13, 2011 at 2:20 pm. It destroyed some buildings and caused additional damage to many structures affected by previous earthquakes. After the spire of the Christchurch Cathedral collapsed in the previous quake, the tower of Lyttelton’s famous timeball station was destroyed completely in this one. A number of people suffered injuries but nobody died in direct relation to the earthquake.

I’m feeling very lucky to have been able to visit this great place in all its pre-quake beauty. I left New Zealand in mid July 2010, just a little over a month before the first quake. Without knowing it, this was a lucky “escape” because what’s a month in the perspective hundreds, thousands, millions of years of tectonic activity? Despite all this, some day I will definitely go back to this amazing place – shaky or not, it doesn’t matter.