WordPress CSS Accordion Menu With Sliding Notes In 3 Easy Steps
This is a CSS accordion menu tutorial that explains how to implement the accordion effect in your WordPress page or post using CSS and the Sliding Notes plugin.
Note: You need to have JavaScript enabled for this to work.
Sliding Notes support the accordion effect as of version 1.5. However, actually making fancy CSS accordion menus (like this one over here) requires extra work. Here is what you need to do:
Step 1: Write the accordion content
Write the content as usual, using the [slider] tag to specify note title and content. Don’t care about formatting yet.
Every accordion item complies to the following pattern:
[slider title="CSS Accordion Title" group="unique-accordion-name"]CSS Accordion Content[/slider]
You can write the content using a bullet list, like this
Unfortunately, if you need multiple lines/paragraphs inside the note (which is usually the case with accordion content), you can’t do that in the visual editor, as it will add a new bullet point each time you hit return. You need to switch to HTML mode and enter your content there.
Here is the corresponding HTML-mode editor content:
<ul> <li>[slider title="CSS Accordion Title 1" group="accordion-1"]CSS Accordion Content 1[/slider]</li> <li>[slider title="CSS Accordion Title 2" group="accordion-1"]CSS Accordion Content 2[/slider]</li> <li>[slider title="CSS Accordion Title 3" group="accordion-1"] CSS Accordion Content 3 with multiple lines[/slider]</li> </ul>
As you see, the CSS accordion menu is already fully functional, but not overly fancy. We proceed to:
Step 2: Annotate the enclosing element
In the post editor, switch to HTML mode, locate the <ul> element of the above bullet list, and assign it a CSS class, say
<ul class="portfolio">
That class will be used to visually style the accordion menu via CSS, which is:
Step 3: Define the accordion menu visual style using CSS
This is basically a straight forward CSS thing. Copy and paste the folowing CSS code and adjust it to your liking:
/* CSS accordion menu content styling: */
ul.portfolio .hackadelic-sliderPanel {
width: 39em; /* skip this if you don't need a width limitation */
}
/* CSS accordion menu title/button styling: */
ul.portfolio a.hackadelic-sliderButton {
width: 39em; /* skip this if you don't need a width limitation */
height: 24px; /* skip this if you don't need a specific height */
background: url(/i/bg/sidebar-button-bg-1.png) left top repeat-x; /* add some cool button background */
color: black; /* skip this if your link text color looks good on the background image*/
display: block; /* important: make all slider buttons expand over the whole list */
margin: 3px 3px; /* skip this if you don't need specific margins */
text-indent: 1em; /* skip this if you don't need a specific text indentation */
line-height: 22px;
font-weight: bold;
}
/* CSS accordion menu title/button styling when the mouse hovers over it: */
ul.portfolio a.hackadelic-sliderButton:hover {
background: url(/i/bg/sidebar-button-bg-2.png) left top repeat-x;
}
/* overall portfolio list styling */
ul.portfolio {
list-style-type: none; /* if you don't like the bullet points, remove them */
}
Note the syntax “ul.portfolio“. It tells the browser to apply the styling to bullet list (ul) elements only if they have the class “portfolio”.
Note also that the above styling complements or overrides the Sliding Notes styling you already have (see Sliding Notes configuration and styling).
If your CSS accordion menu styling is to be used throughout your blog, you can either add the CSS to your theme’s “style.css” (not recommended, unless you want to loose the changes when you update your theme), or use the MyCSS plugin. If the CSS accordion menu styling is specific to the post or page it appears on, it is best to use the Codification plugin to embed the CSS into the entry.
See the CSS Accordion Menu in Action
Now let me add the “portfolio” class to the above bullet list for you, while you go and check it out! «Click here for the magic to happen!» 
- Sliding Notes - Scriptaculous Caveats
- Sliding Notes HowTo - Centered Button With 1.0 Series
- Getting Started With Sliding Notes And MyCSS In 4 Super-Easy Steps
- Sliding Notes Lessons - Beware of HTML Tags In Title
- PassionDuo Theme Defect - And How To Fix It
- Sliding Notes Self Aid - Overcoming Theme Footer Defects
- Sliding Notes HowTo's - Adding An Image To The Button
- WordPress CSS Accordion Menu With Sliding Notes In 3 Easy Steps
