362 Using the accordion table snippet

Showing and hiding content with an accordion

Using an accordion can be an effective way to show and hide large amounts of content on a page. Implementing an accordion usually requires some knowledge of code, but an accordion table snippet has been created to allow for easily adding an accordion to a page without any code. The accordion is edited as a table, and upon publish is converted into the necessary code format to be able to function properly.

Accordions are mobile-friendly and can contain many types of content, including text, lists, and images.

Accordion table snippet example

Heading for Accordion Item #1

Alice was not a bit hurt, and she jumped up on to her feet in a moment: she looked up, but it was all dark overhead; before her was another long passage, and the White Rabbit was still in sight, hurrying down it. There was not a moment to be lost: away went Alice like the wind, and was just in time to hear it say, as it turned a corner, 'Oh my ears and whiskers, how late it's getting!' She was close behind it when she turned the corner, but the Rabbit was no longer to be seen: she found herself in a long, low hall, which was lit up by a row of lamps hanging from the roof.

There were doors all round the hall, but they were all locked; and when Alice had been all the way down one side and up the other, trying every door, she walked sadly down the middle, wondering how she was ever to get out again.

Suddenly she came upon a little three-legged table, all made of solid glass; there was nothing on it except a tiny golden key, and Alice's first thought was that it might belong to one of the doors of the hall; but, alas! either the locks were too large, or the key was too small, but at any rate it would not open any of them. However, on the second time round, she came upon a low curtain she had not noticed before, and behind it was a little door about fifteen inches high: she tried the little golden key in the lock, and to her great delight it fitted!

Heading for Accordion Item #2

Alice opened the door and found that it led into a small passage, not much larger than a rat-hole: she knelt down and looked along the passage into the loveliest garden you ever saw. How she longed to get out of that dark hall, and wander about among those beds of bright flowers and those cool fountains, but she could not even get her head though the doorway; 'and even if my head would go through,' thought poor Alice, 'it would be of very little use without my shoulders. Oh, how I wish I could shut up like a telescope! I think I could, if I only know how to begin.' For, you see, so many out-of-the-way things had happened lately, that Alice had begun to think that very few things indeed were really impossible.

There seemed to be no use in waiting by the little door, so she went back to the table, half hoping she might find another key on it, or at any rate a book of rules for shutting people up like telescopes: this time she found a little bottle on it, ('which certainly was not here before,' said Alice,) and round the neck of the bottle was a paper label, with the words 'DRINK ME' beautifully printed on it in large letters.

Heading for Accordion Item #3

It was all very well to say 'Drink me,' but the wise little Alice was not going to do that in a hurry. 'No, I'll look first,' she said, 'and see whether it's marked "poison" or not'; for she had read several nice little histories about children who had got burnt, and eaten up by wild beasts and other unpleasant things, all because they would not remember the simple rules their friends had taught them: such as, that a red-hot poker will burn you if you hold it too long; and that if you cut your finger very deeply with a knife, it usually bleeds; and she had never forgotten that, if you drink much from a bottle marked 'poison,' it is almost certain to disagree with you, sooner or later.

However, this bottle was not marked 'poison,' so Alice ventured to taste it, and finding it very nice, (it had, in fact, a sort of mixed flavour of cherry-tart, custard, pine-apple, roast turkey, toffee, and hot buttered toast,) she very soon finished it off.

Adding an accordion with the accordion table snippet

Step 1

Open the editor in the region where you want the accordion table to appear.

Step 2

Click on the "Insert Predefined Snippet Content" icon.

Snippet Icon

Step 3

In the "Category" drop down, select "Transforms" Then from the list of available snippets, select "Accordion Table". Once selected, a preview should appear. Click "Insert."

Select from the snippet dropdown

Screenshot of snippet window selecting accordion table.

Step 4

Begin editing your accordion table. Headings are on the left, and content is on the right. You may put anything in your content area including lists, images, paragraphs, etc.

Editing the table

Adding additional accordion items

To insert another row, place your cursor in the row above where you would like to add a new accordion item. From the toolbar, select the table tools, then from the drop-down select "Row," then "insert row after."

Adding more items

Video: Adding an accordion table snippet