1. Seattle Colleges home page
  2. Administration
  3. Web Development
  4. Drupal Content Editing on Websites
  5. Accordions, Tabs, Images, and Files

Accordions, Tabs, Images, and Files

Under the Body text box there is a dropdown. When you click the down arrow you will see all the content options available with the Paragraph module.

Paragraph module options for content

Accordions

Click Add Accordion and then the first Accordion Section will open:

  • Check the Show Expand and Show Indicators boxes for accessibility
  • Fill out the Accordion Section Title

Drupal module add accordion

After you create the Accordion Section, click Add Simple for the Accordion Section Body. Once you have created a few Accordions, all of your Accordions will be viewable collapsed when you go back to edit.

Accordions collapsed editor view

Tabs

Tabs have the same structure as Accordions. Click down arrow and choose Add Tabs:

  • Fill in Tab Section Tab Name
  • Add Simple for Tab Body

Paragraph Tabs view text editor

Images

Add an image by clicking the landscape image icon in the Body text editor toolbar. To make it render correctly for all device sizes:

  • Click the Source button
  • Add class="img-responsive" inside the "img" HTML tag

Add image editor view

Files

Add a file (txt, pdf, doc, docx, ppt, xlsx) by highlighting the text you want to link the file. Then click the paperclip icon in the Body text editor toolbar.

Add file Drupal admin

You can learn more about other types of Drupal pages and content in the Content Editing on Website section. And if you have questions please reach out to webteam.central@seattlecolleges.edu.