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
October 19th, 2009 at 4:57 am
Super nice Menus. Love rounding corners.
Bill and Sheila
October 19th, 2009 at 2:15 pm
Thanks, Bill and Sheila! It’s all self-made
December 29th, 2009 at 11:09 am
Nice work with the accordion. Is it possible to have the buttons side by side without the panel moving the next button below.
Cheers Muz!
December 29th, 2009 at 1:21 pm
Muzza, I know what you mean, but it’s not possible with SN.
December 30th, 2009 at 2:58 am
That’s cool, will post my showcase once it’s up and running.
March 26th, 2010 at 1:15 pm
This is a really useful trick. It would be a lot better if there was a different css class for the active slider title though. It’s very important to highlight the active slide in a accordion. I hope you will consider adding this feature soon:)
March 28th, 2010 at 12:42 pm
ktsixit, that extra CSS class is already on my agenda
June 25th, 2010 at 8:25 am
thank you for great tutorial ..
July 20th, 2010 at 5:28 pm
really great tut
August 19th, 2010 at 10:23 pm
Fantastic coding!
Question?
The bullets still show even with your code
/* overall portfolio list styling */
ul.portfolio {
list-style-type: none; /* if you don’t like the bullet points, remove them */
}
Does the code go somewhere special or should it just work in my my.css file (which is otherwise working well!
August 20th, 2010 at 7:46 pm
Mark, I suppose your theme overrides that clause. Try appending “!important” to “none”.
August 21st, 2010 at 5:45 am
I really like this tutorial and the sliding menu is exactly what I have been looking for.
Unfortunately, my skills are very limited. I have entered all of the above code. I’m using the codification plugin to enter the CSS in the post. When previewing the page, I don’t get the sliders. As far as I can guess, I need to activate javascript. Would you be able to post what I need to enter to activate the JS?
Can this be entered into the JS portion of the codification plugin?
Thank you,
Deanna
August 25th, 2010 at 11:15 am
Hi,
I follow exactly with your examples. But I can’t seem to fix the font size problem.
I want to hide 2 short paragraphs of words like below.
~~~~~~~~~~~~~~~~~~~~~~~~~. Click to read
~~~~~~~~~~~~~~~~~~~~~~Paragraph 1~~~~~~~~~~~~~~~~~~~~~~~~~~
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
~~~~~~~~~~~~~~~~~~~~~~Paragraph 2~~~~~~~~~~~~~~~~~~~~~~~~~~
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
~~~~~~~~~~~~~~~~start 3rd paragraph here~~~~~~~~~~~~~~~~~~~
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
I typed it in wordpress editor as below
~~~~~~~~~~~~~~~~~~~~~~. [slider title="Click to read"]
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~[/slider]
~ : text
But the font size in that section became larger when showing up on my blog.
I’ve tested many different spacing, positions but can’t fix it too.
Is it a defect? Or it can be solved in anyway?
Thanks for your help!
September 1st, 2010 at 2:04 pm
Deanna, the tutorial needs JS to do the fancy trick to dynamically turn a bullet list into
apply the portfolio class to the bullet list. If you entered the CSS and HTML as described, AND have the Sliding Notes Plugin installed, you should see the sliders immediately. If the extra CSS styling does not appear, perhaps try putting it into my.css.
September 1st, 2010 at 9:22 pm
Veron, I can’t tell much w/o having seen the issue live, I dare to guess that putting [slider] and [/slider] on a line of own might make a difference.