Add a Collapsible Group Section

Collapsible groups are good to use when you have a variety of items that could take up a lot of screen space but  may not interest every viewer.
With the collapsible group, each viewer can pick which items they want to read more about. You save a lot of viewing space when you use this type of section.

With the Collapsible Group you can have more than one item for users to click on and those items can be displayed in a couple of ways:

The first thing you need to do is give the group a title that explains what the viewer will be looking at. I am going to use Costa Rica again, but am going to break up the information into cities within Costa Rica and call it Costa Rica Destinations. 

The next thing is to determine what Display Style you want to use, your options are as follows:

The actual content will stay the same regardless of the style chosen, so I will show examples of each style after explaining the rest of the content fields. For now, I will use Accordion style.

Once the display style is chosen, click on Add New Content Item

Enter the Title for the first item, it should correspond to the Group Title you chose.  In my example, I am going to use San Jose, which is a city in Costa Rica.

Once all the information has been added for the first item, click on the Add another Content Item button and set it up with the desired information. Add all the content item you need for this group then save the page.

In my example, I added 4 items to represent 4 different travel destinations in Costa Rica and my finished section will look like the following examples.
Accordion View:

The viewer would click on an arrow to expand the item they want to read. Only one item can be expanded at a time. If the viewer expands one item, then clicks on a new item, the first item will collapse automatically:

If I would have chosen the Tabs Display, my section would look like this:

The first tab will be visible as soon as the viewer gets to your page, then they have to click on the other tabs to view the information about those areas. Only one tab can be open at a time.

This display type can look  messy, and could take up more space on the page than the accordion type.You also need to be mindful of the amount of tabs you add. The more tabs you have; the smaller they get and it can look very crowded.

You need to decide which style works best for the information you are trying to share. 

CLOSE X Drupal