Once again in our path towards using WordPress as a true CMS and not just a blogging platform, we’re looking at ways to use WP to create dynamic jQuery user interface elements.
The “Accordion” element is one particularly slick way designers have figured out to condense large amounts of content into a smaller area. I have mixed feelings about these but recently worked on a project in WordPress that required use of an accordion.
I wanted the content to be dynamic and editable via WordPress and without requiring large amounts of HTML in a WordPress post (shudder).
My solution is as follows.
- Build a page template with a jQuery accordion in the content.
- EXPLODE! (split) the WordPress content into an array.
- Loop the array into sections of the accordion.
The best practical example I can think of for a church is a “Statement of Faith” page for a church. Lots of text, generally and it could do with being condensed.
Step 1: Build a page template with a jQuery accordion.
If you read my previous posts about building jQuery tabbed content in WordPress, this process will be pretty similar.
In our new page template (I usually just duplicate the default template and name it something else), we’re going to be replacing the “the_content()” function with something like:
[cc lang=”html”]
Section 1
Some content
Section 2
Some other content
Section 3
Some additional content
[/cc]
You might be wondering why there is an empty h2 tag with the class “trigger” while the “container” class has the actual title of the trigger inside… we’ll get to that later. Just roll with me on this.
Next let’s style the html. In this case I’m using styles based on Soh Tanaka’s jQuery accordion post, just changing the background image on the trigger and width (to match).
[cc lang=”CSS”]
h2.trigger {
cursor: pointer;
padding: 0; margin: 0 0 5px 0;
background: url(http://dl.dropbox.com/u/1437686/h2_trigger_a.jpg) no-repeat;
height: 46px; line-height: 46px;
width: 570px;
font-size: 2em;
font-weight: normal;
float: left;
color: #fff;
text-decoration: none;
display: block;
padding: 0 0 0 50px;
}
h2.trigger:hover {
color: #ccc;
}
h2.clicked {background-position: left bottom;}
.container {
margin: 0 0 5px; padding: 0;
overflow: hidden;
font-size: 1.2em;
width: 530px;
clear: both;
background: #f0f0f0;
border: 1px solid #d6d6d6;
-webkit-border-bottom-right-radius: 5px;
-webkit-border-bottom-left-radius: 5px;
-moz-border-radius-bottomright: 5px;
-moz-border-radius-bottomleft: 5px;
border-bottom-right-radius: 5px;
border-bottom-left-radius: 5px;
padding: 20px;
display: none;
}
[/cc]
These styles aren’t necessary, but I happen to find them visually appealing.
Next we add the jQuery, again, based loosely Soh Tanaka’s. It’s good practice to take a good look at the code we are copying to understand exactly the logic we are using, but in this case, our goal isn’t the accordion itself, but the content of the accordion. Therefore, we’ll have to settle for the good ole’ copy/paste method.
[cc lang=”javascript”]
$(function() {
//Activate first accordion elements (optional)
$(‘.trigger:first’).addClass(‘clicked’);
$(‘.container:first’).addClass(‘active’);
//Move the H2 content from the container to the trigger
$(‘.container h2’).each(function() {
$(this).parent()
.prev()
.text($(this).text());
$(this).remove();
});
//Animate and display active content
$(‘.active’).slideDown();
//Make the clicked elements active
$(‘.trigger’).each(function() {
$(this).click(function() {
//Remove “active” classes from current elements.
$(‘.active’).slideUp(function() {
$(this).prev().removeClass(‘clicked’);
$(this).removeClass(‘active’);
});
//Add “active” classes to clicked elements
$(this).next().slideDown(function() {
$(this).prev().addClass(‘clicked’);
$(this).addClass(‘active’);
});
});
});
});
[/cc]
Now that you have your HTML, CSS and JS all in the right place, your page should contain something like this.
Publish a WordPress page with this template and you should have a nice static jQuery accordion element on your page.
Next up, the fun part. Making the content dynamic.
Terry says
Nice Script! Is it possible to have the first item closed on load?
Brian Notess says
Yup . You should be able to comment out or delete lines 3 and 4 that add the active and clicked classes to the first list item.
fabi says
is there a way to close again when if a click an active trigger?
i hope i explained myself >_<