JSFiddle - React, Tailwind, and code Playground
HTML
<div class="accordion">
<div class="accordion-section">
<a class="accordion-section-title" href="#accordion-1">Phoenix Participants List</a>
<div id="accordion-1" class="accordion-section-content">
<ul>
<li>Ak-Chin Southern Dunes</li>
<li>Antelope Hills- North</li>
<li>Antelope Hills- South</li>
<li>Arizona Grand Resort</li>
<li>ASU Karsten</li>
<li>Augusta Ranch</li>
<li>Camelback- Ambiente</li>
<li>Camelback- Padre</li>
<li>Coldwater Golf Club</li>
<li>Continental Golf Club</li>
<li>Continental Country Club</li>
<li>Copper Canyon Golf CLub</li>
<li>Coyote Lakes Golf CLub</li>
<li>Eagle Mountain</li>
<li>Golf Club at Estrella</li>
<li>Grayhawk Golf Club- Raptor</li>
<li>Grayhawk Golf Club- Talon</li>
<li>Kokopelli</li>
<li>Legend at Arrowhead</li>
<li>Lone Tree Golf Club</li>
<li>Longbow Golf Club</li>
<li>Lookout Mountain Golf Club</li>
<li>McDowell Mountain Golf Club</li>
<li>Palm Valley- Lake</li>
<li>Papago Golf Course</li>
<li>Poston Butte Golf Club</li>
<li>Quintero Golf Club</li>
<li>Raven Golf Club Phoenix</li>
<li>San Marcos Golf Resort</li>
<li>Scottsdale Silverado</li>
<li>Sedona Golf Resort</li>
<li>Starfire Golf Club</li>
<li>Stonecreek Golf Club</li>
<li>Sunland Springs Village</li>
<li>Supersitition Springs Village</li>
<li>Superstition Springs Golf Club</li>
<li>Talking Stick- North</li>
<li>Talking Stick- South</li>
<li>The Phoenician</li>
<li>The Westin Kierland Resort</li>
<li>TPC® Scottsdale- Champions</li>
<li>TPC® Scottsdale- Stadium</li>
<li>Trilogy at Vistancia</li>
<li>Troon North- Monument</li>
<li>Troon North- Pinnacle</li>
<li>Verrado Golf Club</li>
...
CSS
/* @import url('http://example.com/example_style.css'); */
@import url('//fonts.googleapis.com/css?family=Open+Sans%3A100italic%2C200italic%2C300italic%2C400italic%2C600italic%2C700italic%2C800italic%2C900italic%2C900%2C800%2C700%2C600%2C500%2C400%2C300%2C200%2C100&subset=latin&ver=92f4bfe2122cdca027e6117e11aefa5c');
/**
* CSS @imports must be at the top of the file.
* Add them above this section.
*/
/* ==========================================================================
HS COS Boilerplate v1.5.3
========================================================================== */
/* This responsive framework is required for all styles. */
{% include "hubspot/styles/responsive/required_base.css" %}
{% include "custom/page/OrcaReport_April2016-theme/OrcaReport_April2016-modules.css" %}
{% include "custom/page/OrcaReport_April2016-theme/OrcaReport_April2016-FontAwesome.css" %}
/* These includes are optional, but helpful. */
{% include "hubspot/styles/patches/recommended.css" %}
/* ==========================================================================
Index:
1. BASE STYLES
- Variables
- Macros
- Base
- Typography
2. COS STRUCTURE
- Structure
- Header
- Content
- Footer
3. MAIN NAVIGATION
- Custom Menu Primary
- Mobile Menu
4. TEMPLATE MODULE CLASSES
- Common Template Classes
- Site Pages
- Landing Pages
- System Pages
5. COS COMPONENTS
- Blog
- Forms
- Buttons
6. MISCELLANEOUS
7. MOBILE MEDIA QUERIES
8. ACCORDIONS
========================================================================== */
/* ==========================================================================
1. BASE STYLES
========================================================================== */
/*...
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();
});
});