JSFiddle - React, Tailwind, and code Playground

HTML

<p>Some Android devices may have default settings enabled that terminate background apps from running after a certain amount of time in an attempt to conserve battery and improve overall performance.</p>
<p>Settings like <strong>Battery Optimization, Data Saver, and App Standby</strong> are enabled by default in Android. Although, drives will remain on the device until the app is opened while connected to the internet; these settings can cause drives to
  show up after a long delay, making it seem as though no drives were caught or your account isn't synced.</p>
<p>To ensure your drives are shown as they're captured, please click or tap your device brand below to learn how to allow MileIQ to consistently keep your mileage on track.</p>
<div class="accordion">
  <div class="accordion-section"><a class="accordion-section-title" href="#accordion-1">Samsung Phones and Tablets</a>
    <div id="accordion-1" class="accordion-section-content">
      <p>Check these five settings to ensure MileIQ's Drive Detection is optimized on your Samsung device: Battery Optimization, Power Saving Mode, Smart Manager/App Power Monitor, Data Saver, and any installed third-party memory/RAM boosters.</p>
      <div><strong>1. </strong><strong>Battery Optimization</strong></div>
      <p>The first area to check on your device is the Battery section, specifically: <strong>Battery Optimization</strong>. Battery Optimization features are designed to conserve battery, but can prevent MileIQ from functioning properly in capturing your
        drives. You can allow MileIQ to perform as needed in the background by doing the following:</p>
      <ol>
        <li>Go to <strong>Apps &gt; Settings</strong> on your device</li>
        <li>Tap <strong>Device Maintenance</strong> if it is present</li>
        <li>Tap <strong>Battery &gt; Battery Usage</strong></li>
        <li>Tap the <strong>⋮</strong> menu button and then tap <strong>Optimize Battery Usage</strong></li>
        <li>Tap <strong>All...

CSS

/*----- Accordion -----*/

.accordion,
.accordion * {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}

.accordion {
  overflow: hidden;
  box-shadow: #3C3C3C;
  border-radius: 2px;
  background: #FFFFFF;
  border: 1px solid #3C3C3C;
  border-bottom: 2px solid #3C3C3C;
}


/*----- Section Titles -----*/

.accordion-section-title {
  width: 100%;
  padding: 15px;
  display: inline-block;
  border: 1px solid #3C3C3C;
  background: #F5F5F5;
  transition: all linear 0.15s;
  /* Type */
  font-size: 1.200em;
  text-shadow: 0px 0px 0px #3C3C3C;
  color: #3C3C3C;
}

.accordion-section-title.active,
.accordion-section-title:hover {
  background: #FFFFFF;
  border-left: 10px solid #FFB213;
  border-right: 10px solid #FFB213;
  /* Type */
  text-decoration: none;
}

.accordion-section:last-child .accordion-section-title {
  border-bottom: 1px solid #3C3C3C;
  border-top: 1px solid #3C3C3C
}


/*----- Section Content -----*/

.accordion-section-content {
  padding: 15px;
  display: none;
}

JavaScript

$(document).ready(function() {
  function close_accordion_section() {
    $('.accordion .accordion-section-title').removeClass('active');
    $('.accordion .accordion-section-content').slideUp(300).removeClass('open');
  }

  $('.accordion-section-title').click(function(e) {
    // Grab current anchor value
    var currentAttrValue = $(this).attr('href');

    if ($(e.target).is('.active')) {
      close_accordion_section();
    } else {
      close_accordion_section();

      // Add active class to section title
      $(this).addClass('active');
      // Open up the hidden content panel
      $('.accordion ' + currentAttrValue).slideDown(300).addClass('open');
    }

    e.preventDefault();
  });
});