Accordion
Expandable content sections using native <details> and <summary> elements, with bordered and dark variants.
Default Accordion
Default accordion
What are the park hours?
The park is open 24 hours a day, 7 days a week, year-round. Some roads and facilities have seasonal closures.
Do I need a reservation?
Reservations are required for camping. Day-use visitors do not need a reservation but may need a timed entry permit during peak season.
Are pets allowed?
Pets are allowed in developed areas, on roads, and in campgrounds but must be on a leash no longer than six feet. Pets are not allowed on trails or in the backcountry.
<div class="ug-accordion">
<details class="ug-accordion__item" open>
<summary class="ug-accordion__header">
What are the park hours?
<span class="ug-accordion__caret"></span>
</summary>
<div class="ug-accordion__body">
<p>The park is open 24 hours a day, 7 days a week, year-round. Some roads and facilities have seasonal closures.</p>
</div>
</details>
<details class="ug-accordion__item">
<summary class="ug-accordion__header">
Do I need a reservation?
<span class="ug-accordion__caret"></span>
</summary>
<div class="ug-accordion__body">
<p>Reservations are required for camping. Day-use visitors do not need a reservation but may need a timed entry permit during peak season.</p>
</div>
</details>
<details class="ug-accordion__item">
<summary class="ug-accordion__header">
Are pets allowed?
<span class="ug-accordion__caret"></span>
</summary>
<div class="ug-accordion__body">
<p>Pets are allowed in developed areas, on roads, and in campgrounds but must be on a leash no longer than six feet. Pets are not allowed on trails or in the backcountry.</p>
</div>
</details>
</div>Bordered Accordion
Bordered variant
Hiking Information
Over 300 miles of maintained trails ranging from easy walks to strenuous backcountry routes.
Camping Details
Twelve campgrounds offer a variety of settings from riverside to alpine meadows. Reservations recommended.
Fishing Regulations
A park fishing permit is required. Catch and release only in designated streams. No live bait permitted.
<div class="ug-accordion ug-accordion--bordered">
<details class="ug-accordion__item" open>
<summary class="ug-accordion__header">
Hiking Information
<span class="ug-accordion__caret"></span>
</summary>
<div class="ug-accordion__body">
<p>Over 300 miles of maintained trails ranging from easy walks to strenuous backcountry routes.</p>
</div>
</details>
<details class="ug-accordion__item">
<summary class="ug-accordion__header">
Camping Details
<span class="ug-accordion__caret"></span>
</summary>
<div class="ug-accordion__body">
<p>Twelve campgrounds offer a variety of settings from riverside to alpine meadows. Reservations recommended.</p>
</div>
</details>
<details class="ug-accordion__item">
<summary class="ug-accordion__header">
Fishing Regulations
<span class="ug-accordion__caret"></span>
</summary>
<div class="ug-accordion__body">
<p>A park fishing permit is required. Catch and release only in designated streams. No live bait permitted.</p>
</div>
</details>
</div>Dark Accordion
Dark variant
Winter Conditions
Heavy snowfall closes most roads from November through April. Only the north entrance remains open year-round.
Road Closures
Check the current road status before visiting. Construction and weather may cause temporary closures at any time of year.
Emergency Services
Call 911 for emergencies. Ranger stations are located at major trailheads and visitor centers.
<div class="ug-accordion ug-accordion--dark">
<details class="ug-accordion__item" open>
<summary class="ug-accordion__header">
Winter Conditions
<span class="ug-accordion__caret"></span>
</summary>
<div class="ug-accordion__body">
<p>Heavy snowfall closes most roads from November through April. Only the north entrance remains open year-round.</p>
</div>
</details>
<details class="ug-accordion__item">
<summary class="ug-accordion__header">
Road Closures
<span class="ug-accordion__caret"></span>
</summary>
<div class="ug-accordion__body">
<p>Check the current road status before visiting. Construction and weather may cause temporary closures at any time of year.</p>
</div>
</details>
<details class="ug-accordion__item">
<summary class="ug-accordion__header">
Emergency Services
<span class="ug-accordion__caret"></span>
</summary>
<div class="ug-accordion__body">
<p>Call 911 for emergencies. Ranger stations are located at major trailheads and visitor centers.</p>
</div>
</details>
</div>Class Reference
| Class | Description |
|---|---|
.ug-accordion | Accordion container |
.ug-accordion__item | Individual accordion item (use <details>) |
.ug-accordion__header | Clickable header (use <summary>) |
.ug-accordion__caret | Rotating arrow indicator |
.ug-accordion__body | Expandable content area |
.ug-accordion--bordered | Bordered card-style variant |
.ug-accordion--flush | No outer borders (flush edges) |
.ug-accordion--dark | Dark background variant |