Collapsing Content into Accordions
Condense content into rows that visitors can click to expand.
Accordions can be a handy tool to condense long pages. When clicked, the accordion header opens or closes to show or hide content.
Typically, multiple accordions are stacked, like this:
This is the accordion body. You can add multiple blocks to format the body, including:
- More paragraphs
- Lists (like the bulleted list you’re reading right now!)
- Headings
- Images and other media
Multiple accordions stack quite nicely.
However, accordions require people to choose to click a heading, creating a slight barrier between visitors and content.
Accordions do have drawbacks, though. They require visitors to read a series of headings, then click a heading to view more information. The mental processing and additional steps slightly increase the page’s interaction cost — that is, the effort visitors must exert to reach their goals.
When to use accordions
- For distinct sections of content from which visitors will pick and choose (e.g. policies, year-by-year curriculum descriptions, program-dependent instructions)
- To avoid creating child pages that are too deep to appear in the site menu (i.e. sub-sub-sub pages)
- To collapse supplementary information that could otherwise appear daunting
When not to use accordions
- If most or all of the content should be accessible at once (e.g. to compare information in different sections)
- For sections that aren’t very long (that click should be worthwhile!)
- If visitors will need to read all or most sections on the page
- On pages that should be printer-friendly
How to add accordions
New to building pages in blocks? Get to know the block editor »
- Add an accordions block. By default, the block starts with three individual accordions.
- Enter header text. Like other headings, aim to make accordion headers clear, concise and consistent.
- Add content to the accordion body. You can insert multiple content blocks. Just avoid blocks that will make the accordion too crowded or busy (billboards, cards, etc.).
- Add header and body text to additional accordions.
- Remove unused accordions. An empty accordion will appear if you don’t remove it!
- Or, add more accordions by clicking the plus icon in the gray bar at the bottom of the accordions block.
- To re-order accordions, click on the accordion row you’re moving, then use the block arrows on the left to move it to its new location.
Deleting or moving an entire set of accordions
The accordions block can be tricky to work with since the blocks are nested — the parent accordions block contains multiple inner blocks for each row. If you delete the inner blocks but the parent remains, the empty accordions will keep appearing on the page. The nested blocks tutorial demonstrates how to select different levels of parent and inner blocks so they’re easier to work with.
Accordion examples
In the first example, site visitors will only need to access one of the two accordions, since the content addresses two distinct audiences.
Choosing a mentor
Predoctoral trainees may have a general idea of the research area they would like to pursue but insufficient knowledge of the human resources and mentorship opportunities available through this program.
To help students make the most appropriate choice of mentor and to encourage interactions, the Division of Biology & Biomedical Sciences (DBBS) and Department of Biomedical Engineering (BME) require PhD or MD/PhD students to undergo two to three three-month-long rotations in different laboratories during their first year of training, before choosing their thesis mentor, and are typically appointed to this program in their second year.
After earning candidacy for graduation, predoctoral trainees form a thesis committee consisting of six DBBS members, which must include the mentor. Likewise, BME students assemble thesis committees composed primarily of, though not exclusively limited to, BME faculty, and follow the same evaluation procedures as DBBS students.
Since applicants for postdoctoral positions typically have specific orientation towards a certain mentor or laboratory at the time of application, they are not required to rotate in other labs.
Within six months of appointment, postdoctoral trainees assemble a training advisory committee constituted by five faculty chosen by the trainee from among the program mentors (or other faculty whose expertise more closely aligns with the research topic), and include the trainee’s mentor.
The scope of this committee is similar to that of a predoctoral student thesis committee and is designed to provide additional guidance to the trainee towards achieving the goals of the research project and fulfill all the requirements of the training program. These advisory committees serve a crucial role in the trainee’s scholarly development within this program, and their feedback to the trainee and mentor is a fundamental component of the trainee’s yearly evaluation.
In the second example, the condensed information helps readers quickly recognize the three rotation areas. Opening the accordion provides additional detail, which the reader may not need.
Psychiatry residency program rotations
Beginning in your first year, you will experience the autonomy of running your own team of health-care providers, including nurses, medical students, social workers and pharmacists, in a hospital setting. All first-year rotations listed below are in the inpatient units of Barnes-Jewish Hospital.
Residents take care of patients hospitalized on the inpatient medical units at Barnes-Jewish Hospital. Residents typically are assigned to a general medicine team consisting of an attending internist, internal medicine residents and medical students.
Residents function as categorical internal medicine interns. Residents may be assigned to the hospitalist service where they work individually with the hospitalist attending.
Residents are expected to attend didactic conferences of the internal medicine department during their rotations.
There is no required overnight call.
In place of one of the four months, residents may elect to do one month of emergency medicine in the emergency room or one month on the general inpatient pediatric floor at St. Louis Children’s Hospital.
Residents are assigned to teams consisting of an attending neurologist, a supervising neurology resident and medical students taking care of patients admitted to the inpatient neurology service at Barnes-Jewish Hospital.
Residents also may be assigned to the neurology consultation service.
There is no required overnight call.
Residents are expected to attend didactic conferences occurring in the Department of Neurology during their rotations.
On this rotation at Barnes-Jewish Hospital, the residents work one-on-one with renowned faculty from Washington University. They learn the basics of psychiatric care including obtaining good histories, doing mental status exams and properly diagnosing and managing patients with severe psychiatric illness. Specialized services include an intensive care unit and a geriatric psychiatry unit. The setting utilizes a multidisciplinary approach with nursing, social workers, activity therapists, chaplain, psychiatrists and medical students. As a group, residents provide coverage 24×7 split into two call shifts during which they admit new patients and provide emergency consultation for issues that arise on the psychiatry units. Residents also are assigned medical students to supervise and educate.