📑 Tabs & Accordions Design Guide

Tabs та Accordions є space-saving UI patterns для organizing related content into collapsible sections. Tabs show one panel at a time horizontally (good для desktop), while accordions stack vertically (mobile-friendly). Для mushroom cultivation guides, tabs separate: "Supplies Needed", "Step-by-Step Instructions", "Troubleshooting", "FAQ". Species profiles use tabs: "Overview", "Identification", "Habitat", "Growing Tips". Accordions work well для lengthy FAQs або tiered information. Effective design requires clear active states, smooth transitions, keyboard navigation (arrow keys для tabs), та accessibility (ARIA roles). Цей guide охоплює CSS/JavaScript implementations, animation techniques, responsive behavior, та WCAG 2.1 compliance.

🧩 Tabs Demo

🍄 Psilocybe Cubensis Overview

Psilocybe cubensis є наймопулярнішим species для cultivation через robust growth та beginner-friendly характеристики. Potency ranges від 0.63-1.25% psilocybin by dry weight.

Common Names: Golden Teacher, B+, Ecuador, Penis Envy

Natural Habitat: Subtropical regions на cattle dung

🌱 Growing Guide

Method: PF Tek або bulk monotub recommended для beginners

  • Temperature: 75-81°F (24-27°C)
  • Humidity: 90-95% during fruiting
  • Light: 12-hour cycle (indirect)
  • Fresh air: 4-6 exchanges daily

🛡️ Safety Information

Dosage (dried):

  • Threshold: 0.25g
  • Light: 0.5-1g
  • Common: 1.5-2.5g
  • Strong: 3-4g

Important: Always start low та ensure safe set та setting.

🗂️ Accordion Demo

What is PF Tek? ▶

PF Tek (Psilocybe Fanaticus Technique) є beginner-friendly cultivation method using brown rice flour jars. Developed в 1990s, it remains популярним через simplicity та high success rate.

How long does cultivation take? ▶

Total time: 6-8 weeks від inoculation до harvest. Breakdown:

  • Colonization: 2-4 weeks
  • Consolidation: 7-10 days
  • Fruiting: 1-2 weeks
What are common contamination types? ▶

Most common contaminants:

  • Green mold (Trichoderma): Fast-growing, green spores
  • Cobweb mold: White, fluffy (unlike mycelium)
  • Bacterial contamination: Sour smell, slimy texture

💻 CSS Implementation

Tabs:

/* Tab Navigation */
.tabs-nav {
  display: flex;
  gap: 5px;
  border-bottom: 2px solid #e9ecef;
}

.tab-button {
  padding: 12px 24px;
  background: transparent;
  border: none;
  border-bottom: 3px solid transparent;
  color: #6c757d;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.3s;
}

.tab-button:hover {
  color: #f093fb;
}

.tab-button.active {
  color: #f093fb;
  border-bottom-color: #f093fb;
}

/* Tab Panels */
.tab-panel {
  display: none;
}

.tab-panel.active {
  display: block;
  animation: fadeIn 0.3s;
}

@keyframes fadeIn {
  від { opacity: 0; transform: translateY(10px); }
  до { opacity: 1; transform: translateY(0); }
}

Accordions:

/* Accordion Container */
.accordion-item {
  background: white;
  border-radius: 8px;
  margin-bottom: 12px;
  overflow: hidden;
}

/* Accordion Header (clickable) */
.accordion-header {
  padding: 18px 20px;
  background: white;
  border: 2px solid #e9ecef;
  border-radius: 8px;
  cursor: pointer;
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-weight: 600;
  transition: all 0.3s;
}

.accordion-header:hover {
  background: #fff8fd;
  border-color: #f093fb;
}

/* Icon Animation */
.accordion-icon {
  transition: transform 0.3s;
}

.accordion-item.active .accordion-icon {
  transform: rotate(90deg); /* Arrow down */
}

/* Accordion Content (collapsible) */
.accordion-content {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.3s ease-in-out;
  padding: 0 20px;
}

.accordion-item.active .accordion-content {
  max-height: 1000px; /* Large enough untuk content */
  padding: 20px;
}

⚙️ JavaScript

Tab Switching:

function switchTab(event, tabId) {
  // Remove active від всіх tabs
  document.querySelectorAll('.tab-button').forEach(btn => {
    btn.classList.remove('active');
  });
  
  // Remove active від всіх panels
  document.querySelectorAll('.tab-panel').forEach(panel => {
    panel.classList.remove('active');
  });
  
  // Add active до clicked tab
  event.currentTarget.classList.add('active');
  
  // Add active до corresponding panel
  document.getElementById(tabId).classList.add('active');
}

Accordion Toggle:

function toggleAccordion(element) {
  // Close all other accordions (single-open mode)
  document.querySelectorAll('.accordion-item').forEach(item => {
    if (item !== element) {
      item.classList.remove('active');
    }
  });
  
  // Toggle clicked accordion
  element.classList.toggle('active');
}

// For multi-open mode (allow multiple accordions open):
function toggleAccordionMulti(element) {
  element.classList.toggle('active');
}

♿ Accessibility

ARIA для Tabs:

<div class="tabs-container">
  <div class="tabs-nav" role="tablist">
    <button class="tab-button" 
            role="tab" 
            aria-selected="true"
            aria-controls="panel1"
            id="tab1">
      Tab 1
    </button>
  </div>
  
  <div id="panel1" 
       class="tab-panel" 
       role="tabpanel" 
       aria-labelledby="tab1">
    Content...
  </div>
</div>

Keyboard Navigation:

// Arrow key navigation для tabs
document.querySelector('.tabs-nav').addEventListener('keydown', (e) => {
  const tabs = Array.від(document.querySelectorAll('.tab-button'));
  const currentIndex = tabs.indexOf(document.activeElement);
  
  if (e.key === 'ArrowRight') {
    const nextIndex = (currentIndex + 1) % tabs.length;
    tabs[nextIndex].focus();
    tabs[nextIndex].click();
  }
  
  if (e.key === 'ArrowLeft') {
    const prevIndex = (currentIndex - 1 + tabs.length) % tabs.length;
    tabs[prevIndex].focus();
    tabs[prevIndex].click();
  }
});

✅ Tabs та Accordions Checklist

Implementation Checklist:

Tabs:
  • ☐ Active tab visually distinct (border або background)
  • ☐ Smooth panel transitions (fade або slide)
  • ☐ ARIA: role="tablist", role="tab", role="tabpanel"
  • ☐ Keyboard: Arrow keys navigate між tabs
  • ☐ Mobile: Consider stacking або scrollable tabs
Accordions:
  • ☐ Expand/collapse icon rotates або changes
  • ☐ Smooth height transition (max-height)
  • ☐ Single-open або multi-open mode clearly implemented
  • ☐ Header clickable area large enough (44px minimum)
  • ☐ ARIA: aria-expanded="true/false"