Tab and Accordion Feature Row

This feature row showcases the impact that Texas A&M Health students and researchers have on the state of Texas, the nation, and the world. I worked with our print designers to adapt this concept for the website.

I first took the print assets—the State/Nation/World typography, the maps, and the background image—and mocked up several different layout options that could be built with basic Bootstrap components. As a group, we settled on the tab layout shown. I wrote the HTML by starting with the Bootstrap tab component, adding our text and graphic content little by little, and manipulating the styles to achieve the final look and function.

To adapt this feature row for smaller screens, I reconfigured the content vertically into a Bootstrap accordion, preserving the look and feel while reducing the amount of scrolling for the user.

In both versions of the component, I incorporated the special typography as an SVG image, then used a hidden paragraph class to make the titles accessible for screen readers.

Design

Screenshot of the State, Nation, and World impact section of the redesigned Texas A&M Health website

Code


  <section id="geographic-reach" class="full-screen-height parallax-container">
    <div class="full-width parallax-full-bg" style="background-image: url('images/homepg/farm-bg.jpg');"
      data-src="images/homepg/farm-bg.jpg" aria-label="Sun setting in a field with a combine">
    </div>
    <div id="bg-white-geographic-reach-top" class="bg-white down-arrow-left">
      <div class="container">
        <div class="row">
          <div class="col text-center">
            <h2 class="section-heading">Impact on the state, nation and world</h2>
            <p class="lead mt-3 mb-5">
              Through a shared responsibility and steadfast commitment to transformational learning and discovery, we are uniquely positioned
              to solve the greatest challenges in health care for those here in Texas, across the country
              <span class="text-nowrap">and around the globe.</span>
            </p>
          </div>
        </div>
      </div>
    </div>
    <div id="bg-white-geographic-reach-top-content">
    <!-- begin accordion for small screens -->
      <div id="snw-accordion" class="d-xs-block d-xl-none">
        <div class="row justify-content-center position-relative" id="accordion-box-snw">
          <div class="tabContent col-11 py-4">
            <div class="panel-group" id="snw-accordion-panel">
              <div class="panel panel-default">
                <div class="panel-heading">
                  <div class="panel-title">
                    <a data-toggle="collapse" data-target="#collapseForState" aria-controls="collapseForState" aria-expanded="true">
                      <img class="img-fluid" src="images/graphics/state-min.svg" alt="">
                      <p class="sr-only">State</p>
                    </a>
                  </div>
                </div>
                <div id="collapseForState" class="panel-collapse collapse show" data-parent="#accordion-box-snw">
                  <div class="panel-body">
                    <div class="row" id="state">
                      <div class="col snw-text-accordion">
                        <p class="text-white snw-copy">
                          With campus locations and clinical affiliates spanning the state, we are structured for impact. Our model acts as a conduit for community-based research,
                          health education and disease prevention initiatives to improve lives within Texas’ 254 counties.
                        </p>
                        <div id="state-img" class="d-flex justify-content-center">
                          <div class="text-center pt-6 data-point mr-2 ml-2">
                            <p class="large-number">
                              360K+
                            </p>
                            <p class="data-point-copy">
                              annual direct contacts made through community outreach and education
                            </p>
                            <p class="cta-link">
                              <a class="ghost" href="/about/reach/state.html">See our state impact in action</a>
                            </p>
                          </div>
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
              <div class="panel panel-default">
                <div class="panel-heading">
                  <div class="panel-title">
                    <a data-toggle="collapse" data-target="#collapseforNation" aria-controls="collapseforNation" aria-expanded="false">
                      <img class="img-fluid" src="images/graphics/nation-min.svg" alt="">
                      <p class="sr-only">Nation</p>
                    </a>
                  </div>
                </div>
                <div id="collapseforNation" class="panel-collapse collapse" data-parent="#accordion-box-snw">
                  <div class="panel-body">
                    <div class="row justify-content-start" id="nation">
                      <div class="col snw-text-accordion">
                        <p class="text-white snw-copy">
                          We’re the home for leaders who are developing solutions to the seemingly impossible problems facing health care in the United States. Our community of
                          scholars are paving the way for smarter investments with greater returns and helping all Americans live better lives.
                        </p>
                        <div id="nation-img" class="d-flex justify-content-center">
                          <div class="text-center pt-7 data-point mr-2 ml-2">
                            <p class="large-number">
                              3,200
                            </p>
                            <p class="data-point-copy">
                              current health professions students ready to affect positive change across the United States
                            </p>
                            <p class="cta-link">
                              <a class="ghost" href="/about/reach/nation.html">See our national impact in action</a>
                            </p>
                          </div>
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
              <div class="panel panel-default">
                <div class="panel-heading">
                  <div class="panel-title">
                    <a data-toggle="collapse" data-target="#collapseForWorld" aria-controls="collapseForWorld" aria-expanded="false">
                      <img class="img-fluid" src="images/graphics/world-min.svg" alt="">
                      <p class="sr-only">World</p>
                    </a>
                  </div>
                </div>
                <div id="collapseForWorld" class="panel-collapse collapse" data-parent="#accordion-box-snw">
                  <div class="panel-body">
                    <div class="row justify-content-start" id="world">
                      <div class="col snw-text-accordion">
                        <p class="snw-copy">
                          Our students, educators and innovators work across international boundaries to improve the health of populations. Multiple partnerships and agreements
                          with universities throughout the world lay the groundwork for joint teaching, research and outreach programs. Students are also offered
                          unique experiences to expand academic horizons through global mission trips.
                        </p>
                        <div id="world-img" class="d-flex justify-content-center">
                          <div class="text-center pt-7 data-point mr-2 ml-2">
                            <p class="large-number">
                              475
                            </p>
                            <p class="data-point-copy">
                              patient encounters during a one-time, five-day interdisciplinary mission trip to Bolivia
                            </p>
                            <p class="cta-link">
                              <a class="ghost" href="/about/reach/world.html">See our global impact in action</a>
                            </p>
                          </div>
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div> 
          </div>
        </div>
      </div>
      <!-- end accordion for small screens -->

      <!-- begin tabs for large screens -->
      <div id="snw-tabs" class="d-none d-xl-block">
        <div id="snw-tabs-inner" class="container position-relative mt-10 mb-8 fade-in-on-visible delay-100 vivify fadeIn">
          <div class="row">
            <div class="col-6">
              <ul id="state-nation-world-tabs" class="nav nav-tabs flex-column" role="tablist">
                <li class="nav-item">
                  <a class="nav-link active" id="state-tab" data-toggle="tab" href="#state-content" role="tab" aria-controls="state-content" aria-selected="true">
                    <span class="sr-only">State</span>
                    <img src="images/graphics/state-min.svg" alt="">
                  </a>
                </li>
                <li class="nav-item">
                  <a class="nav-link fade-in-on-visible delay-250 vivify fadeIn" id="nation-tab" data-toggle="tab" href="#nation-content" role="tab" aria-controls="nation-content" aria-selected="false">
                    <span class="sr-only">Nation</span>
                    <img src="images/graphics/nation-min.svg" alt="">
                  </a>
                </li>
                <li class="nav-item">
                  <a class="nav-link fade-in-on-visible delay-500 vivify fadeIn" id="world-tab" data-toggle="tab" href="#world-content" role="tab" aria-controls="world-content" aria-selected="false">
                    <span class="sr-only">World</span>
                    <img src="images/graphics/world-min.svg" alt="">
                  </a>
                </li>
              </ul>
            </div>
            <div class="col-6">
              <div id="state-nation-world-content" class="tab-content text-white">
                <div class="tab-pane fade show active" id="state-content" role="tabpanel" aria-labelledby="state-tab">
                  <p class="text-white snw-copy">
                    With campus locations and clinical affiliates spanning the state, we are structured for impact. Our model acts as a conduit for community-based research, health education and disease prevention
                    initiatives to improve lives within Texas’ 254 counties.
                  </p>
                  <div class="d-flex justify-content pt-3">
                    <img class="mb-5 map-bg" src="images/graphics/texas-wt-transparent-min.svg"
                      alt="Shape of Texas with TAMHSC campuses, clinical locations, affiliates, community education and outreach marked">
                    <div class="data-point mr-2 ml-2">
                      <p class="large-number">
                        360K+
                      </p>
                      <p class="data-point-copy">
                        annual direct contacts made through community outreach and education
                      </p>
                      <p class="cta-link">
                        <a class="ghost" href="/about/reach/state.html">See our state impact in action</a>
                      </p>
                    </div>
                  </div>
                </div>
                <div class="tab-pane fade" id="nation-content" role="tabpanel" aria-labelledby="nation-tab">
                  <p class="text-white snw-copy">
                    We’re the home for leaders who are developing solutions to the seemingly impossible problems facing health care in the United States. Our community of scholars are paving the way for smarter investments
                    with greater returns and helping all Americans live better lives.
                  </p>
                  <img class="map-bg mx-auto d-block" src="images/graphics/usa-shape-wt-min.svg" alt="Shape of the continental United States">
                  <div class="data-point d-flex justify-content-center mt-5">
                    <p class="large-number">
                      3,200
                    </p>
                    <p class="data-point-copy">
                      current health professions students ready to affect positive change across the United States
                    </p>
                  </div>
                  <p class="cta-link">
                    <a class="ghost" href="about/reach/nation.html">See our national impact in action</a>
                  </p>
                </div>
                <div class="tab-pane fade" id="world-content" role="tabpanel" aria-labelledby="world-tab">
                  <p class="snw-copy">
                    Our students, educators and innovators work across international boundaries to improve the health of populations. Multiple partnerships and agreements with universities throughout the world lay the
                    groundwork for joint teaching, research and outreach programs. Students are also offered unique experiences to expand academic horizons through global mission trips.
                  </p>
                  <img class="mb-5 map-bg mx-auto d-block" src="images/graphics/world-shape-wt-min.svg" alt="Shape of a map of the world">
                  <div class="data-point d-flex justify-content-center">
                    <p class="large-number">
                      475
                    </p>
                    <p class="data-point-copy">
                      patient encounters during a one-time, five-day interdisciplinary mission trip to Bolivia
                    </p>
                  </div>
                  <p class="cta-link">
                    <a class="ghost" href="about/reach/world.html">See our global impact in action</a>
                  </p>
                </div>
              </div> 
            </div>
          </div>
        </div>
      </div>
      <!-- end tabs for large screens -->
    </div>
  </section>