CCHub Logo CCHub Tailwind Collection
Komponenten Akkordeon Akkordeon-Komponente

Akkordeon-Komponente

Eine Akkordeonkomponente mit 3D-Design, responsiven Effekten und Unterstützung für dunkle Themen, die nur HTML und CSS (Tailwind CSS) verwenden. Die Komponente verwendet CSS für den Dunkelmodus und enthält Übergänge für sanfte Akkordeons. Es reagiert vollständig. Es wird kein JavaScript verwendet.

Vorschau

HTML-Code 

<div class="accordion-3d">
  <div class="accordion-item">
    <input type="checkbox" id="item-1" class="accordion-toggle" />
    <label for="item-1" class="accordion-header">Section 1</label>
    <div class="accordion-content">
      <p>Content for section 1 goes here.</p>
    </div>
  </div>
  <div class="accordion-item">
    <input type="checkbox" id="item-2" class="accordion-toggle" />
    <label for="item-2" class="accordion-header">Section 2</label>
    <div class="accordion-content">
      <p>Content for section 2 goes here.</p>
    </div>
  </div>
  <div class="accordion-item">
    <input type="checkbox" id="item-3" class="accordion-toggle" />
    <label for="item-3" class="accordion-header">Section 3</label>
    <div class="accordion-content">
      <p>Content for section 3 goes here.</p>
    </div>
  </div>
</div>

<style>
/* Basic Accordion Styling */
.accordion-3d .accordion-item {
  border-bottom: 1px solid #ccc;
  margin-bottom: 10px;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
  transition: transform 0.3s ease-in-out;
}

.accordion-3d .accordion-header {
  display: block;
  padding: 15px;
  cursor: pointer;
  background-color: #f0f0f0;
  position: relative;
  z-index: 2;
  transition: background-color 0.3s ease-in-out, transform 0.3s ease-in-out;
}

.accordion-3d .accordion-toggle {
  display: none;
}

.accordion-3d .accordion-content {
  padding: 15px;
  background-color: #fff;
  overflow: hidden;
  max-height: 0;
  transition: max-height 0.5s ease-in-out;
  position: relative;
  z-index: 1;
}

.accordion-3d .accordion-toggle:checked ~ .accordion-content {
  max-height: 500px; /* Adjust as needed */
}

/* 3D Effect */
.accordion-3d .accordion-item:hover {
  transform: translateY(-5px) rotateX(5deg);
}

.accordion-3d .accordion-header::after {
  content: '>';
  position: absolute;
  right: 15px;
  top: 50%;
  transform: translateY(-50%) rotate(90deg);
  transition: transform 0.3s ease-in-out;
}

.accordion-3d .accordion-toggle:checked ~ .accordion-header::after {
  transform: translateY(-50%) rotate(-90deg);
}

/* Dark Mode */
@media (prefers-color-scheme: dark) {
  .accordion-3d .accordion-item {
    border-bottom: 1px solid #555;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.3);
  }

  .accordion-3d .accordion-header {
    background-color: #333;
    color: #eee;
  }

  .accordion-3d .accordion-content {
    background-color: #222;
    color: #ccc;
  }
}

/* Responsive adjustments (optional) */
@media (max-width: 768px) {
  .accordion-3d .accordion-item {
    margin-bottom: 5px;
  }
  .accordion-3d .accordion-header {
    padding: 10px;
  }
  .accordion-3d .accordion-content {
    padding: 10px;
  }
}
</style>

Verwandte Komponenten

RetroAkkordeonEinfach

Eine einfache, reaktionsschnelle Akkordeonkomponente im Retro-Stil für Unternehmenswebsites mit Unterstützung für den Dunkelmodus mit Tailwind CSS. Diese Komponente verwendet ein triadisches Farbschema und benötigt kein JavaScript.

Offen

Akkordeon-Komponente

Dark Mode Accordion Component mit Farbschema in Erdtönen, mäßiger Komplexität, für Social-Media-Zwecke, mit responsivem Design und Unterstützung für dunkle Themen. Kein JavaScript.

Offen

Akkordeon-Komponente mit pastellfarbenem, minimalistischem Design

Eine komplexe, reaktionsschnelle, mit dunklen Themen kompatible Akkordeonkomponente für Portfolios, die mit einer minimalistischen/flachen Pastellästhetik unter Verwendung von Tailwind CSS gestaltet wurde. Enthält mehrere interaktive Elemente und verwendet picsum.photos für Bilder.

Offen