Skip to content

Accordions

Function: A type of menu that displays a list of headers stacked on top of one another. When clicked on (or triggered by a keyboard interaction or screen reader), these headers will either reveal or hide associated content. Used to reduce length of a site page and hide content unless the user wants to view it.

Note: Accordions are typically paired with headers that group together all of the different sections. This, of course, isn’t required, but should be kept in mind. The accordion name isn’t a header and is only used by screen readers. Section titles are always an H3.

Step 1: Browse options and copy and paste shortcode

The following are examples of accordions. Copy and paste the shortcode below it into the WordPress Editor where you wish it to appear.

*Copy all of the code, including the [ ] on either end.

Uppercase title option

Accessible Accordion

Shred all toilet paper and spread around the house bird bird bird bird bird bird human why take bird out i could have eaten that sleep in the bathroom sink. Refuse to drink water except out of someone’s glass fall asleep on the washing machine but present belly, scratch hand when stroked yet what a cat-ass-trophy! for pet me pet me don’t pet me. Chew iPad power cord furrier and even more furrier hairball. Dismember a mouse and then regurgitate parts of it on the family room floor make it to the carpet before i vomit mmmmmm. Purrr purr littel cat, little cat purr purr caticus cuteicus yet intrigued by the shower sit on human they not getting up ever.

This is a button!

Cat walks in keyboard love me! yet stares at human while pushing stuff off a table mew mew small kitty warm kitty little balls of fur. I vomit in the bed in the middle of the night make meme, make cute face but run at 3am stare at owner accusingly then wink. Cats are the world. Weigh eight pounds but take up a full-size bed get suspicious of own shadow then go play with toilette paper slap the dog because cats rule and stretch out on bed so tuxedo cats always looking dapper. Fooled again thinking the dog likes me being gorgeous with belly side up. Always wanting food find box a little too small and curl up with fur hanging out or this cat happen now, it was too purr-fect!!!

Give me attention or face the wrath of my claws let me in let me out let me in let me out let me in let me out who broke this door anyway yet eat from dog’s food, hey! you there, with the hands attack the child. Hide when guests come over it’s 3am, time to create some chaos so push your water glass on the floor i like frogs and 0 gravity or meow to be let in and

[accordion name="Accessible Accordion" style="uppercase-title"]

[section title="Example"] Section[/section]

[section title="Example"] Section[/section]

[section title="Example"] Section[/section]

[/accordion]

Sentence case title option

Accessible Accordion

Shred all toilet paper and spread around the house bird bird bird bird bird bird human why take bird out i could have eaten that sleep in the bathroom sink. Refuse to drink water except out of someone’s glass fall asleep on the washing machine but present belly, scratch hand when stroked yet what a cat-ass-trophy! for pet me pet me don’t pet me. Chew iPad power cord furrier and even more furrier hairball. Dismember a mouse and then regurgitate parts of it on the family room floor make it to the carpet before i vomit mmmmmm. Purrr purr littel cat, little cat purr purr caticus cuteicus yet intrigued by the shower sit on human they not getting up ever.

This is a button!

Cat walks in keyboard love me! yet stares at human while pushing stuff off a table mew mew small kitty warm kitty little balls of fur. I vomit in the bed in the middle of the night make meme, make cute face but run at 3am stare at owner accusingly then wink. Cats are the world. Weigh eight pounds but take up a full-size bed get suspicious of own shadow then go play with toilette paper slap the dog because cats rule and stretch out on bed so tuxedo cats always looking dapper. Fooled again thinking the dog likes me being gorgeous with belly side up. Always wanting food find box a little too small and curl up with fur hanging out or this cat happen now, it was too purr-fect!!!

Give me attention or face the wrath of my claws let me in let me out let me in let me out let me in let me out who broke this door anyway yet eat from dog’s food, hey! you there, with the hands attack the child. Hide when guests come over it’s 3am, time to create some chaos so push your water glass on the floor i like frogs and 0 gravity or meow to be let in and

[accordion name="Accessible Accordion"]

[section title="Example"] Section[/section]

[section title="Example"] Section[/section]

[section title="Example"] Section[/section]

[/accordion]

 

Non-bold option

*Note: This can be used on the uppercase title and sentence case title options as an additional attribute.

Accessible Accordion

Shred all toilet paper and spread around the house bird bird bird bird bird bird human why take bird out i could have eaten that sleep in the bathroom sink. Refuse to drink water except out of someone’s glass fall asleep on the washing machine but present belly, scratch hand when stroked yet what a cat-ass-trophy! for pet me pet me don’t pet me. Chew iPad power cord furrier and even more furrier hairball. Dismember a mouse and then regurgitate parts of it on the family room floor make it to the carpet before i vomit mmmmmm. Purrr purr littel cat, little cat purr purr caticus cuteicus yet intrigued by the shower sit on human they not getting up ever.

This is a button!

Cat walks in keyboard love me! yet stares at human while pushing stuff off a table mew mew small kitty warm kitty little balls of fur. I vomit in the bed in the middle of the night make meme, make cute face but run at 3am stare at owner accusingly then wink. Cats are the world. Weigh eight pounds but take up a full-size bed get suspicious of own shadow then go play with toilette paper slap the dog because cats rule and stretch out on bed so tuxedo cats always looking dapper. Fooled again thinking the dog likes me being gorgeous with belly side up. Always wanting food find box a little too small and curl up with fur hanging out or this cat happen now, it was too purr-fect!!!

Give me attention or face the wrath of my claws let me in let me out let me in let me out let me in let me out who broke this door anyway yet eat from dog’s food, hey! you there, with the hands attack the child. Hide when guests come over it’s 3am, time to create some chaos so push your water glass on the floor i like frogs and 0 gravity or meow to be let in and

[accordion name="Accessible Accordion" style="non-bold"]

[section title="Example"] Section[/section]

[section title="Example"] Section[/section]

[section title="Example"] Section[/section]

[/accordion]

Step 2: Customize your accordion

To change a section title, simply replace Example with whatever you wish to title it. So if you want a section to be titled Go Huskies, section title=”Example” will become section title=”Go Huskies”.

*Remember to keep the quotation marks and end brackets. Also, do not make a section title too long, these are supposed to be the headers for whatever section you are wanting to insert into the accordion. The longer you make it, the more that the accordion will expand to accommodate it, running the risk of it looking odd.

Replace Section with whatever content you wish to display in that particular section of the accordion. This can include different header styles, buttons, certain cards, and copy of course.

*Remember to not delete the ] [ brackets of the shortcode or else you will break it!

Attributes

  • style: Set the accordion titles to uppercase or non-bold. Options: uppercase-title, non-bold (Default: none)
  • name: Set the name for the accordion.
  • id: IDs are a way to assign a unique identifier to a specific shortcode or section. Some shortcodes have slightly different behaviors with IDs than others, to view those as well as best practices please visit our best practices for IDs page.
  • active: To make a section already be open, add this attribute to the desired section. Options: true (default: none)

 

Example of a customized accordion:

Reasons to love cheese

Accessible Accordion

Cheese spans many many cultures, coming in incredible forms and flavors. Not only can you consume cheese on its own, you can also have it in so many dishes.

For Example:

  • Cheese (in the raw): Straight up and to the point. And so, so beautiful.
  • Cheese and honey: Cheese on its own is beautiful, but add honey? Game changer.
  • Charcuterie boards: Charcuterie boards for the win. Catch me eating the entire spread at any party before the actual meal. Plus it gives you the opportunity to have a nice Ratatouille moment and eat cheese and grapes at the same time.
  • Cheesy fries: Potatoes and cheese were a match made in heaven.
  • Mac and Cheese: Forever a classic. Ranges from the childhood staple Kraft blue box to gourmet fancy stuff that involves lobster and crunchy toppings with combinations of multiple cheeses to create a symphony of fatty, salty happiness.
  • Salads: Need a little extra something in your salad? Add in some nice feta for instance and it’ll be a nice salty addition to your otherwise dull salad experience. Plus it’s healthy because it’s a salad…right?
  • Fondue: Ahhhh yes, fondue. Eaten on cold winter nights or when you are wanting to be particularly fancy. Can’t go wrong with a pot of melted goodness.
  • Lasagna: The Italians are the kings of cheesy dishes. (Well, and I guess the French) Lasagna is a classic example of this.
  • Burgers: An American staple and debate causer. My personal favorite in terms of fast food burger will have to go to Culver’s ButterBurger. Haven’t had it? I suggest making the pilgrimage.
  • Pizza: Pizza baby! The hardest goodbye for many a lactose intolerant person.
  • Cheesecake: It can also come in dessert form, see? So versatile, you can have it for every meal, every stage of the eating experience.

Want to learn more? Check out the curd nerd himself, Gavin Webber.

Click for curdiness

Cheese contains casein. It also contains casein fragments called casomorphins, a casein-derived morphine-like compound. Basically, dairy protein has opiate molecules built in. When consumed, these fragments attach to the same brain receptors that heroin and other narcotics attach to. (Deepest apologies to those who have dairy allergies and are unable to indulge in the glory of cheese.)

Don’t believe me, well then believe Forbes

[accordion name="Accessible Accordion" style="uppercase-title"]

[section title="The possibilities"] Cheese spans many many cultures, coming in incredible forms and flavors. Not only can you consume cheese on its own, you can also have it in so many dishes.

For Example:

  • Cheese (in the raw): Straight up and to the point. And so, so beautiful.
  • Cheese and honey: Cheese on its own is beautiful, but add honey? Game changer.
  • Charcuterie boards: Charcuterie boards for the win. Catch me eating the entire spread at any party before the actual meal. Plus it gives you the opportunity to have a nice Ratatouille moment and eat cheese and grapes at the same time.
  • Cheesy fries: Potatoes and cheese were a match made in heaven.
  • Mac and Cheese: Forever a classic. Ranges from the childhood staple Kraft blue box to gourmet fancy stuff that involves lobster and crunchy toppings with combinations of multiple cheeses to create a symphony of fatty, salty happiness.
  • Salads: Need a little extra something in your salad? Add in some nice feta for instance and it’ll be a nice salty addition to your otherwise dull salad experience. Plus it’s healthy because it’s a salad…right?
  • Fondue: Ahhhh yes, fondue. Eaten on cold winter nights or when you are wanting to be particularly fancy. Can’t go wrong with a pot of melted goodness.
  • Lasagna: The Italians are the kings of cheesy dishes. (Well, and I guess the French) Lasagna is a classic example of this.
  • Burgers: An American staple and debate causer. My personal favorite in terms of fast food burger will have to go to Culver’s ButterBurger. Haven’t had it? I suggest making the pilgrimage.
  • Pizza: Pizza baby! The hardest goodbye for many a lactose intolerant person.
  • Cheesecake: It can also come in dessert form, see? So versatile, you can have it for every meal, every stage of the eating experience.

[/section]

[section title="A brief history and FAQ source"] https://www.youtube.com/watch?v=QKae1k1BDdA

Want to learn more? Check out the curd nerd himself, Gavin Webber.

[uw_button style="square-outline" color="light-gold" target="https://www.youtube.com/c/GavinWebber"]Click for curdiness[/uw_button] [/section]

[section title="Scientifically proven, cheese is the best"] Cheese contains casein. It also contains casein fragments called casomorphins, a casein-derived morphine-like compound. Basically, dairy protein has opiate molecules built in. When consumed, these fragments attach to the same brain receptors that heroin and other narcotics attach to. (Deepest apologies to those who have dairy allergies and are unable to indulge in the glory of cheese.)

[uw_button style="square-outline" color="light-gold" target="https://www.forbes.com/sites/michaelpellmanrowland/2017/06/26/cheese-addiction/?sh=261591d35830"]Don’t believe me, well then believe Forbes[/uw_button][/section]

[/accordion]

Step 3 (optional): Defaulting an accordion open

If you want to have a section of your accordion already open for external users to see, simply add active=”true” to any of the sections after the section title attribute.

Before

[section title="Example"] [/section]

After

[section title="Example" active="true"] [/section]

 

Example of this effect:

Accessible Accordion

Four score and seven years ago our fathers brought forth on this continent, a new nation, conceived in Liberty, and dedicated to the proposition that all men are created equal.

Now we are engaged in a great civil war, testing whether that nation, or any nation so conceived and so dedicated, can long endure. We are met on a great battle-field of that war. We have come to dedicate a portion of that field, as a final resting place for those who here gave their lives that that nation might live. It is altogether fitting and proper that we should do this.

But, in a larger sense, we can not dedicate — we can not consecrate — we can not hallow — this ground. The brave men, living and dead, who struggled here, have consecrated it, far above our poor power to add or detract. The world will little note, nor long remember what we say here, but it can never forget what they did here. It is for us the living, rather, to be dedicated here to the unfinished work which they who fought here have thus far so nobly advanced. It is rather for us to be here dedicated to the great task remaining before us — that from these honored dead we take increased devotion to that cause for which they gave the last full measure of devotion — that we here highly resolve that these dead shall not have died in vain — that this nation, under God, shall have a new birth of freedom — and that government of the people, by the people, for the people, shall not perish from the earth.

Abraham Lincoln
November 19, 1863

No man thinks more highly than I do of the patriotism, as well as abilities, of the very worthy gentlemen who have just addressed the House. But different men often see the same subject in different lights; and, therefore, I hope it will not be thought disrespectful to those gentlemen if, entertaining as I do opinions of a character very opposite to theirs, I shall speak forth my sentiments freely and without reserve. This is no time for ceremony. The question before the House is one of awful moment to this country. For my own part, I consider it as nothing less than a question of freedom or slavery; and in proportion to the magnitude of the subject ought to be the freedom of the debate. It is only in this way that we can hope to arrive at truth, and fulfill the great responsibility which we hold to God and our country. Should I keep back my opinions at such a time, through fear of giving offense, I should consider myself as guilty of treason towards my country, and of an act of disloyalty toward the Majesty of Heaven, which I revere above all earthly kings.

Mr. President, it is natural to man to indulge in the illusions of hope. We are apt to shut our eyes against a painful truth, and listen to the song of that siren till she transforms us into beasts. Is this the part of wise men, engaged in a great and arduous struggle for liberty? Are we disposed to be of the number of those who, having eyes, see not, and, having ears, hear not, the things which so nearly concern their temporal salvation? For my part, whatever anguish of spirit it may cost, I am willing to know the whole truth; to know the worst, and to provide for it.

I have but one lamp by which my feet are guided, and that is the lamp of experience. I know of no way of judging of the future but by the past. And judging by the past, I wish to know what there has been in the conduct of the British ministry for the last ten years to justify those hopes with which gentlemen have been pleased to solace themselves and the House. Is it that insidious smile with which our petition has been lately received? Trust it not, sir; it will prove a snare to your feet. Suffer not yourselves to be betrayed with a kiss. Ask yourselves how this gracious reception of our petition comports with those warlike preparations which cover our waters and darken our land. Are fleets and armies necessary to a work of love and reconciliation? Have we shown ourselves so unwilling to be reconciled that force must be called in to win back our love? Let us not deceive ourselves, sir. These are the implements of war and subjugation; the last arguments to which kings resort. I ask gentlemen, sir, what means this martial array, if its purpose be not to force us to submission? Can gentlemen assign any other possible motive for it? Has Great Britain any enemy, in this quarter of the world, to call for all this accumulation of navies and armies? No, sir, she has none. They are meant for us: they can be meant for no other. They are sent over to bind and rivet upon us those chains which the British ministry have been so long forging. And what have we to oppose to them? Shall we try argument? Sir, we have been trying that for the last ten years. Have we anything new to offer upon the subject? Nothing. We have held the subject up in every light of which it is capable; but it has been all in vain. Shall we resort to entreaty and humble supplication? What terms shall we find which have not been already exhausted? Let us not, I beseech you, sir, deceive ourselves. Sir, we have done everything that could be done to avert the storm which is now coming on. We have petitioned; we have remonstrated; we have supplicated; we have prostrated ourselves before the throne, and have implored its interposition to arrest the tyrannical hands of the ministry and Parliament. Our petitions have been slighted; our remonstrances have produced additional violence and insult; our supplications have been disregarded; and we have been spurned, with contempt, from the foot of the throne! In vain, after these things, may we indulge the fond hope of peace and reconciliation. There is no longer any room for hope. If we wish to be free– if we mean to preserve inviolate those inestimable privileges for which we have been so long contending–if we mean not basely to abandon the noble struggle in which we have been so long engaged, and which we have pledged ourselves never to abandon until the glorious object of our contest shall be obtained–we must fight! I repeat it, sir, we must fight! An appeal to arms and to the God of hosts is all that is left us!

They tell us, sir, that we are weak; unable to cope with so formidable an adversary. But when shall we be stronger? Will it be the next week, or the next year? Will it be when we are totally disarmed, and when a British guard shall be stationed in every house? Shall we gather strength by irresolution and inaction? Shall we acquire the means of effectual resistance by lying supinely on our backs and hugging the delusive phantom of hope, until our enemies shall have bound us hand and foot? Sir, we are not weak if we make a proper use of those means which the God of nature hath placed in our power. The millions of people, armed in the holy cause of liberty, and in such a country as that which we possess, are invincible by any force which our enemy can send against us. Besides, sir, we shall not fight our battles alone. There is a just God who presides over the destinies of nations, and who will raise up friends to fight our battles for us. The battle, sir, is not to the strong alone; it is to the vigilant, the active, the brave. Besides, sir, we have no election. If we were base enough to desire it, it is now too late to retire from the contest. There is no retreat but in submission and slavery! Our chains are forged! Their clanking may be heard on the plains of Boston! The war is inevitable–and let it come! I repeat it, sir, let it come.

It is in vain, sir, to extenuate the matter. Gentlemen may cry, Peace, Peace– but there is no peace. The war is actually begun! The next gale that sweeps from the north will bring to our ears the clash of resounding arms! Our brethren are already in the field! Why stand we here idle? What is it that gentlemen wish? What would they have? Is life so dear, or peace so sweet, as to be purchased at the price of chains and slavery? Forbid it, Almighty God! I know not what course others may take; but as for me, give me liberty or give me death!

Patrick Henry

March 23, 1775

 

Step 4 (optional): Assign an id to your accordion

Attributes are the pieces within the shortcode that you modify to customize your shortcode. For accordions, we did this in Step 3 to default a section open. An optional attribute that you can add is an id. IDs are a way to assign a unique identifier to a specific shortcode or section. Some shortcodes have slightly different behaviors with IDs than others, to view those as well as best practices please visit our best practices for IDs page.

Back to top