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
can i put images in a sliderpanel???
yes
Hi Hackadelic,
I love your plugin!
Just found out though that it conflicts with the FlippingBook plugin.
Is there a chance to correct that? Is there something I can add to the code so it doesn’t conflict?
Looking forward to hearing from you!
Piet, I won’t be fixing the old version as I am doing a complete rewrite of sliding notes. I can imagine the “next generation” of sliding notes will have all those little diseases fixed already.
Is there a way to change the rate at which the text boxes collapse? For instance, can you make the notes slide down really slowly?
Dave, that’s not possible yet, but I’ve recorded your feature request for a future release.
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!
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.
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
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.
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!
Mark, I suppose your theme overrides that clause. Try appending “!important” to “none”.
really great tut
thank you for great tutorial ..
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:)
ktsixit, that extra CSS class is already on my agenda 🙂
That’s cool, will post my showcase once it’s up and running.
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!
Muzza, I know what you mean, but it’s not possible with SN.
Super nice Menus. Love rounding corners.
Bill and Sheila
Thanks, Bill and Sheila! It’s all self-made 🙂