CCS Drupal Guide
  • Introduction
  • Drupal Platform Introduction
  • Drupal User Roles & Responsibilities
  • Workbench Moderation
  • Drupal Websites: Getting Started
    • Drupal Text (WYSIWYG) Editor
    • Taxonomies
  • Managing Menus
    • Sidebar Menus
  • Best Practice Tips
  • UG Drupal Content Types
    • Banners
    • Book
    • Course Outlines
    • Events
    • FAQ
    • Featured Item
    • News
    • Page
    • People Profiles
    • Service
    • Social Media Account
      • Live Feeds
    • Webform
  • Accessible Content Guide
    • Accessibility Basics
      • Accessibility First Content Development
      • HALT: Accessibility with the Drupal Text Editor
      • Accessible Design Intro
    • Content Titles & Headings
    • Links
    • Colour
    • Documents
    • Images
    • Tables
    • Lists
    • Audio & Video
    • Other Accessible Content
  • Advanced Topics on Drupal Websites
    • Blocks
    • Collapsible Sections / Accordions
    • Categorizing and Displaying Profiles
    • Headings that Expand and Collapse
    • Tabs
    • Customizing Content Layout
    • Mini Panel
    • Google Maps
    • Google reCAPTCHA
    • Bootstrap: Typography
  • SiteImprove
  • Google Analytics
  • Style Guide Code Snippets
  • Home Page Layout Options
  • Home Page Layout Tutorials
  • Content Type View Panes
    • Course Outline Panes
    • Event Panes
    • FAQ Panes
    • Feature Panes
    • News Panes
    • Social Media/Feeds
    • Service Panes
    • People profiles
  • Customizing Site Search
  • Client FAQ
Powered by GitBook
On this page

Was this helpful?

  1. Advanced Topics on Drupal Websites

Headings that Expand and Collapse

Start with content that has a heading, e.g.

<h2>Section Title</h2>

<p>Section text here</p>
<p>More text here</p>

To make the section collapsible, it needs to be wrapped in div tags like this:

<div>
<p>Section text here</p>
<p>More text here</p>
</div>

After you've put the content in a div, give that div the class name collapse and a unique ID:

<div class="collapse" id="uniqueID">
<p>Section text here</p>
<p>More text here</p>
</div>

Now turn your section title into a link with the following code:

<h2><a href="#uniqueName" class="collapsed" data-toggle="collapse">Section Title</a></h2>

Note that href has to equal the unique ID of the div. This is so the link, when clicked, knows which div it's supposed to expand or collapse. So if you want multiple divs on the page that can be expanded or collapsed, each one must have a unique ID.

Note: If you want a section to be expanded by default when a page loads instead of hidden/collapsed, rewrite the link heading code as follows:

<h2><a href="#uniqueName" data-toggle="collapse">Section title here</a></h2>

That is, remove the code class=collapsed (when you include class=collapsed, it makes the link show up with a "Plus" icon to indicate the content can be expanded. This "Plus" icon changes to a "Minus" when the content is expanded). You also need to change the section's div code from:

<div class="collapse">

to:

<div class="collapse in">

Markup for complete, working example:

<h2><a href="#sec0" data-toggle="collapse">This section expanded by default</a></h2>
<div class="collapse in" id="sec0">
<p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. </p>
</div>

<h2><a href="#sec1" class="collapsed" data-toggle="collapse">Section One</a></h2>
<div class="collapse" id="sec1">
<p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. </p>
</div>

<h2><a href="#sec2" class="collapsed" data-toggle="collapse">Section Two</a></h2>
<div class="collapse" id="sec2">
<p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. </p>
</div>

<h2><a href="#sec3" class="collapsed" data-toggle="collapse">Section Three</a></h2>
<div class="collapse" id="sec3">
<p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. </p>
</div>

If you'd like to add a button that toggles multiple sections at the same time, you need to add one more class to each div. For this example, we'll call the class collapse-all though you can use whatever name you prefer:

<h2><a href="#section1" class="collapsed" data-toggle="collapse">Section 1 title here</a></h2>
<div class="collapse collapse-all" id="section1">
    <p>Section 1 text here</p>
</div>

<h2><a href="#section2" class="collapsed" data-toggle="collapse">Section 2 title here</a></h2>
<div class="collapse collapse-all" id="section2">
    <p>Section 2 text here</p>
</div>

<h2><a href="#section3" class="collapsed" data-toggle="collapse">Section 3 title here</a></h2>
<div class="collapse collapse-all" id="section3">
    <p>Section 3 text here</p>
</div>

The code for the button would look like this:

<button aria-controls="section1 section2 section3" aria-expanded="false" class="btn btn-primary" data-target=".collapse-all" data-toggle="collapse" type="button">Your button text here</button>

For aria-controls, list all the div IDs you want the button to control. For data-target, use the class collapse-all (or whatever name you chose - it just needs to be the same for each div). So the complete code would look something like this:

<button aria-controls="section1 section2 section3" aria-expanded="false" class="btn btn-primary" data-target=".collapse-all" data-toggle="collapse" type="button">Your button text here</button>

<h2><a href="#section1" class="collapsed" data-toggle="collapse">Section 1 title here</a></h2>
<div class="collapse collapse-all" id="section1">
    <p>Section 1 text here</p>
</div>

<h2><a href="#section2" class="collapsed" data-toggle="collapse">Section 2 title here</a></h2>
<div class="collapse collapse-all" id="section2">
    <p>Section 2 text here</p>
</div>

<h2><a href="#section3" class="collapsed" data-toggle="collapse">Section 3 title here</a></h2>
<div class="collapse collapse-all" id="section3">
    <p>Section 3 text here</p>
</div>
PreviousCategorizing and Displaying ProfilesNextTabs

Last updated 5 years ago

Was this helpful?