Tips before starting
- Use them if the content is directed towards specific visitors: use accordions when the information does not pertain to all visitors. It helps them pick and choose which content they’d like to read with less scrolling.
- Don’t use with larger, scrolling amounts of content: it may be better for that information to be on its own page. One or two small paragraphs is a good rule of thumb to follow in an accordion.
- One accordion, not worth it: it’s better to have a longer page. One accordion reduces usability from a viewer’s perspective.
- Important calls-to-action: these should NOT be inside accordions. Hiding these makes your viewer’s hunt for them. This can cause them to miss your calls-to-action. Put them in your make content.
- SEO: Google indexes the content within accordions, but it ranks it lower. Make sure that you have highly valuable content outside of the accordions. Read more about this at the end of the article.
Ok, Let’s get started!
If accordions are set up on your website, there should be an icon in your toolbar. Click on the accordion icon to enter the information for all the accordions at one time.
A popup window will open and you can enter your title and content for each accordion. Click the Add Another Accordion button to add another and keep doing so until you are finished. Click “OK”.
A shortcode for the accordion will be added to your text editor. All of the accordions will be wrapped within a [accoridion-wrap]….[/accordion-wrap]code.
The accordions will appear on your page in the format that was styled to match your website. If you need to change the styling for your accordions, contact your Account Director.
Edit content within an accordion
To edit the content of the accordion, do so within the content area of the shortcode. You can add returns to make it easier for you to read but it might create unwanted white space. To remove the unwanted white space, keep the end of one accordion code right next to the start of another accordion code.
As long as you do not alter any of the bracketed code, you can change the content area within the editor (sample highlighted in the screenshot in blue highlight).
The content area will appear as it does in the editor when the accordions are opened on the page or post. However, notice the extra space added between the accordions than when the code remained next to each other. Be sure to keep the spacing consistent throughout your site.
Edit the title within an accordion
To edit a title of an accordion, only change the content within the parenthesis.
Accordions and SEO
Accordions are great for helping to organize your content and shorten pages. It is a good idea, though, to think about the content that is going on your page and what is most important. Google indexes the content within accordions, but it ranks it lower. Make sure that you have highly valuable content outside of the accordions. This may take a little time to think about and plan out, but it is important.