Skip to Main Content
It looks like you're using Internet Explorer 11 or older. This website works best with modern browsers such as the latest versions of Chrome, Firefox, Safari, and Edge. If you continue with this browser, you may see unexpected results.

HACC Class Guides Style Cheat Sheet

Tabbed Box

Loading ...
Which of the following is NOT a characteristic of a scholarly journal article?
A. The article is most often peer-reviewed by other subject area experts.: 9 votes (13.43%)
B. The article is usually longer than just one or two pages.: 6 votes (8.96%)
C. The article includes a references or works cited section.: 1 votes (1.49%)
D. The article often includes glossy photos and graphics.: 51 votes (76.12%)
Total Votes: 67
Google Web Search

Collapsible Content

In order to create a collapsible accordion, you will have to write code in the Source editor. The easiest way to do this is to create the content you want as you normally would, making the things you want to be buttons a correct header (as appropriate for your content). After you write the content and properly apply the code, this is what it would look like / how it would work:

Here is a working example of what this looks like:

Friedman, T. L. (1999). The lexus and the olive tree. Farrar. 

Miller, G. A., Galanter, E., & Pribram, K. H. (1960). Plans and the structure of behavior. Henry Holt and Co.

  • In a work with two or more authors, write all authors’ names, last name first, in the order in which they appear in the source document, and separate them with commas.
Urry, L. A., Cain, M. L., Wasserman, S.A., Minorsky, P. V., & Reece, J. B. (2017). Campbell biology (11th ed.). Pearson.

For a selection from an edited book that has different authors for different chapters.

Valetk, H. A. (2006). A federal law criminalizing cyberstalking is needed. In J. Carroll (Ed.), Privacy (pp. 214-219). Greenhaven.

Murimirwa, A. (2019, December). How repaying loans with social service transforms communities. TED Conferences. ransforms_communities

The code for an accordion that uses H3s as the button label is included here. If you need to use H4s as appropriate, you will need to change each instance of H3 to H4 (shown with black highlight).

/* This starts the accordion*/

<div aria-multiselectable="false" class="panel-group" id="accordion" role="tablist">

/* This starts one panel */
<div class="panel panel-default">

/* Things you MUST change to match for each additional panel are highlighted.*/
<div class="panel-heading" id="tab1" role="tab">
<h3 class="panel-title"><a aria-controls="tab1-panel" aria-expanded="false" data-parent="#accordion" data-toggle="collapse" href="#tab1-panel" role="button">

This is where you type what you want on the button that will expand.


<div aria-labelledby="head_tab1" class="panel-collapse collapse" id="tab1-panel" role="tabpanel">
<div class="panel-body">

This is where you place the content that you want to be displayed when you click on the button to expand that section.