Project Accordionizing the sidebar

Accordions pretty much have the same functionality as tabs. Mostly they're just vertical rather than horizontal. As with tabs, you'll want to use them to "group" similar information together into a tidier space, allowing the site user to take in the information in logical chunks and not have to wander down through the site or scroll.

In the default theme that we've been working with, our page navigation on the sidebar has some information that we'd like people to be able to see at a glance and not have the headings pushed down past the fold where they may miss them. By grouping sections into accordions that drop down and display additional information and links, we save some room and ensure when a page loads that users can at least, see the important organizational headers and know that there is more information they may want to expand and view.

The accordion widget works great with lists, which is what the sidebar is. The widget also, as you can tell by the example code at http://jQueryUI.com/demos/ accordion, recognizes and works with headers and paragraph or div tags set in a consistent, hierarchical order. You can also use various options to set specific DOM objects as headers and navigation elements.

Our default theme's WordPress sidebar is one big ul list inside a div. Perfect for the accordion widget, but since we set up some custom CSS to make the page list display more like navigation buttons, we want to target the next two lists in the list below the page navigation list items. Not to worry, it's easy to target and select the following list items and apply the accordion widget to them as follows:

//select the proper li level and exclude the inner ul lists then wrap in a targetable div jQuery(".xoxo ul li:gt(10)").not(".xoxo ul li ul li")

.wrapAll('<div id="sideAccordion"></div>');

//select the new target and assign the widget jQuery('.xoxo').accordion().css({,marginTop,:,30px'});

The widget's default state is to display the top accordion open. The client would like it to be completely closed. To achieve this, we'll add some parameters to the widget, including active: -1, which is normally used to select which bar to open, but by setting it to -1, they'll all be closed:

//options for the accordion

.accordion({header: 'h2', collapsible: true, active: -1})

//last, some extra styles to the headers and ul lists //to line them up jQuery(".xoxo h3")

.css({'padding':'5px 0 5px 2 5px', 'height':'15px'}); jQuery(".xoxo ul").css({'height': 'auto', 'margin': '0px', 'paddingLeft': '25px', 'paddingTop': '5px', 'paddingBottom': '5px'});

Our sidebar under our page navigation is now accordion-ized in a nice style that matches our page's tabs.

T Recent Posts

public domain coastal image

Lit enim ad minim veniam Dolor sit amet Hello world! What we do

► Recent Comments

► Categories

These accordion headers are closed when the page loads, making it easy for the site user to chose which one to explore.

What we do Work with the best We deliver

v Recent Posts ► Recent Comments ' Archives

► Meta

Lorem ipsum dolor sit amet, corisectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

1. Ut enim ad minim veniam,

2. quis nostrud exercitation ullamco

3. laboris nisi ut aliquip ex ea commodo consequat.

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Disclaimer: The white paper provided is copyrighted material, not for general distribution. Downloading our white paper means you agree to our terms and conditions. Dolor in reprehenderit in

Let's now move on to making our client's last enhancement. -[215 ]-

Blogging For Business

Blogging For Business

Download this Guide And Discover How Start And Run Your Very Own Successful Business Blog. Always Wanted To Start Your Own Blog?

Get My Free Ebook


Post a comment