Beta3.0Requires JS
Components

Accordion

The Accordion component is useful when you want to toggle between hiding and showing large amounts of content. Great for frequently asked questions or numbered steps.

# Basic Accordion

  • The Accordion consists of the Accordion Container: <ul class="accordion"></ul> and the Accordion Items: <li class="accordion-item"></li>.
  • Each Accordion Item contains an Accordion Title: <div class="accordion-title"></div> and an Accordion Body: <div class="accordion-body"></div>
  • Accordion Items can be set to an open state by default by using the class .active. Generally this is used for the first Accordion Item only.
  • Science - Fall Year 1
    Enroll in a 1-credit class in which you will learn about how science happens, join a community of researchers, and determine placement in a lab based on your research interests.
  • What is considered an official test score?
    An official test score is one that comes directly from the testing agency to the Office of Admissions. Test scores listed on transcripts or sent by anyone other than the testing agency are not considered official by the University of Utah.
  • What GPA do I need?
    We do not have a cutoff GPA for admission, but the middle 50% of our admitted class has between a 3.46 - 3.93 unweighted GPA. That means that 25% of our class has a GPA above this range and 25% of our class has a GPA below this range.
Example Markup

  <ul class="accordion">
    <li class="accordion-item active">
    <div class="accordion-title faux-heading h6">Science - Fall Year 1</div>
    <div class="accordion-body">
     ...
    </div>
    </li>
    <li class="accordion-item">
      <div class="accordion-title faux-heading h6">What is considered an official test score?</div>
      <div class="accordion-body">
        ...
      </div>
    </li>
    <li class="accordion-item">
      <div class="accordion-title faux-heading h6">What GPA do I need?</div>
      <div class="accordion-body">
        ...
      </div>
    </li>
  </ul>