1. Components
  2. Accordions

Accordion

<!-- Accordion (Requires AlpineJS Collapse Plugin) -->
<div class="mx-auto">
    <div class="border-b border-b-slate-300" x-data="accordion">
        <h2 class="p-2 text-lg font-semibold hover:cursor-pointer" @click="toggle">
            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" :class="open ? 'rotate-0 -mt-1' : ''" class="w-5 h-5 inline-block transition-all duration-300 -rotate-90">
            <path fill-rule="evenodd" d="M5.23 7.21a.75.75 0 011.06.02L10 11.168l3.71-3.938a.75.75 0 111.08 1.04l-4.25 4.5a.75.75 0 01-1.08 0l-4.25-4.5a.75.75 0 01.02-1.06z" clip-rule="evenodd" />
            </svg>
            Skyscrape LaunchPad
        </h2>

        <div x-cloak x-show="open" x-collapse>
            <div class="pb-4 px-8">
                <p>Propel your startup to new heights with our comprehensive incubation program. Tailored for early-stage tech ventures, LaunchPad offers resources, mentorship, and the initial push every visionary founder seeks.</p>
            </div>
        </div>
    </div>
    <div class="border-b border-b-slate-300" x-data="accordion">
        <h2 class="p-2 text-lg font-semibold hover:cursor-pointer" @click="toggle">
            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" :class="open ? 'rotate-0 -mt-1' : ''" class="w-5 h-5 inline-block transition-all duration-300 -rotate-90">
            <path fill-rule="evenodd" d="M5.23 7.21a.75.75 0 011.06.02L10 11.168l3.71-3.938a.75.75 0 111.08 1.04l-4.25 4.5a.75.75 0 01-1.08 0l-4.25-4.5a.75.75 0 01.02-1.06z" clip-rule="evenodd" />
            </svg>
            Skyscrape Beacon
        </h2>

        <div x-cloak x-show="open" x-collapse>
            <div class="pb-4 px-8">
                <p>A specialized consulting service dedicated to refining business models and growth strategies. Beacon is the guiding light for established tech businesses aiming to pivot or expand their horizons.</p>
            </div>
        </div>
    </div>
    <div class="border-b border-b-slate-300" x-data="accordion">
        <h2 class="p-2 text-lg font-semibold hover:cursor-pointer" @click="toggle">
            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" :class="open ? 'rotate-0 -mt-1' : ''" class="w-5 h-5 inline-block transition-all duration-300 -rotate-90">
            <path fill-rule="evenodd" d="M5.23 7.21a.75.75 0 011.06.02L10 11.168l3.71-3.938a.75.75 0 111.08 1.04l-4.25 4.5a.75.75 0 01-1.08 0l-4.25-4.5a.75.75 0 01.02-1.06z" clip-rule="evenodd" />
            </svg>
            Skyscrape Nexus
        </h2>

        <div x-cloak x-show="open" x-collapse>
            <div class="pb-4 px-8">
                <p>Bridging the gap between startups and industry veterans, Nexus facilitates invaluable networking events, partnerships, and collaborative opportunities. Connect, collaborate, and conquer.</p>
            </div>
        </div>
    </div>
</div>

<style type="text/css">
        [x-cloak] { display: none !important; }
</style>

<script>
    document.addEventListener('alpine:init', () => {
        Alpine.data('accordion', () => ({
            open: false,

            toggle() {
                this.open = ! this.open
            },
            show() {
                this.open = true
            },
            close() {
                this.open = false
            },
        }))
    })
</script>
<!-- /Accordion -->
Requires AlpineJS Requires Collapse Plugin

Purchase TeakUI Components

Instant download - start building in minutes.

Affordable options to fit your budget.

TeakUI All Access

Every Component & Template

$99/year

$69/first year

Use code TEAKUILAUNCH at checkout.

  • Access to Every Component & Template We Release During Your Subscription
  • 60+ Hand Crafted Components
  • Easy Copy & Paste Code
  • Fully Responsive for Any Device
  • Built with TailwindCSS & AlpineJS
  • Use on Unlimited Projects & Apps
  • Priority Support
  • Free Updates & Access to All New Components for 1 Year
  • Valid for Single User
  • 30 Day Money-back Guarantee
Subscribe

TeakUI Team

Up to 5 Licensed Users

$249/year

  • Everything in All Access
  • Licensed For 5 Developers
Subscribe

TeakUI Unlimited

Unlimited Licensed Users

$799/year

  • Everything in All Access
  • Licensed For Unlimited Developers
Subscribe

Are you a Church or Non Profit? Contact us for special pricing.

FAQs

What is the difference between the single user and team plans?

Our All Access single user license plan allows one developer to use the code you purchase. If you have multiple developers on your team, you can upgrade to our team license for either 5 users or unlimited users.

A licensed user is anyone who writes or modifies component or template code created by Hey Teak. Backend devs, DevOps, and others who work in your code base but not on the UI do not require a license.

What kind of support do you offer?

We offer support with any purchasing issues as well as any bugs or errors you might find in our code. While we are not able to offer extensive integration support - we will do our best to help if you get stuck. Just reach out and let us know.

What is your refund policy?

If you're not happy for any reason, contact us within 30 days of purchase for a full refund.

What if I start on a single user plan and then want to upgrade for my team?

No problem! Just reach out to us and we can upgrade you and prorate your subscription.

Can I use this code with React, Vue, etc?

The short answer is yes! However, it may take a bit of effort to make things work. While we don't currently offer drop in components for JS frameworks, we do plan to support that soon. Stay tuned ;)

You mentioned templates but I don't see those yet?

You have a sharp eye! We're working on templates and will be releasing those very soon. Stay tuned.

TeakUI Components

Page Layouts

Navigation

Copyright © 2024 Hey Teak. A project by @tjwebdev.