logo Dashpro

logo

    • Projects
    • Ecommerce
    • Analytics
    • Sales
    • HRM
    • CRM
    • Products
    • Product Details
    • Orders
    • Order Details
    • Customers
    • Shopping Cart
    • Checkout
    • Invoice
    • List
    • Detail
    • Kanban
    • Create
    • Profile
    • Services
    • Faq
    • Pricing
    • Contact Us
    • Maintenance
    • 404
    • Starter
    • Register
    • Login
    • Forgot password
    • Confirm email
    • Change password
    • Logout page
  • Landing page
    • Default
    • Top Navbar
    • Accordion
    • Alerts
    • Avatar
    • Badge
    • Breadcrumb
    • Buttons
    • Card
    • Carousel
    • Collapse
    • Dropdowns
    • Grid
    • List Group
    • Modal
    • Navbar
    • Offcanvas
    • Pagination
    • Progress
    • Scrollbar
    • Spinners
    • Tabs
    • Tooltips
    • Basic Form
    • Datepicker
    • Editor
    • Input tags
    • Uplader
    • Validation
    • Typography
    • Tables
    • Embed video
    • Icons
  • Widgets
  • Calendar
  • Charts
  • Documentation
    • Get started
    • Customize
    • RTL Direction
    • Credits
    • Changelog
Upgrade

Unlock more features and premium content with the Pro Version.

Get Pro Version
  • Customizer

    Customizer

    Theme Color

    Neutral Color

    Light & Dark

    Switch RTL

    Refresh Chart Color

  • 2
    Messages
    Roman Davis
    Jenny Femanta
    Do you have time? I want to call you.
    5h ago
    Sarah Connor
    Sarah Connor
    Let's meet up tomorrow at 3 PM.
    2h ago
    John Wick
    John Wick
    Can you send me the report?
    10m ago
    John Clark
    John Clark
    I have completed the task you asked for.
    1d ago
    Michael Scott
    Michael Scott
    We need to discuss the upcoming project.
    30m ago
    Show all Messages
  • 1
    Notifications
    New message received
    You have a new message from Jane Doe
    2h ago
    Server Down Alert
    Server XYZ has been down for 30 minutes
    3h ago
    Team Meeting Scheduled
    Team meeting scheduled for 2:00 PM
    4h ago
    Reminder: Task Due
    Your task "Finish report" is due tomorrow
    6h ago
    Show all Notifications
  • avatar
    Ari Budin
    • Settings
    • Help Center
    • Languages
    • Sign out

Collapse

  1. Home
  2. Components
  3. Collapse

Toggle the visibility of content across your project with a few classes and Alpine js

Simple Collapse

Link with href

Some placeholder content for the collapse component. This panel is hidden by default but revealed when the user activates the relevant trigger.
<div x-data="{open:false}">
  <p class="flex">
    <a x-on:click.prevent="open=!open" class="py-2 uajskeiolksb inline-block text-center rounded-sm leading-5 text-gray-100 bg-purple-500 border border-purple-500 hover:text-white hover:bg-purple-600 hover:ring-0 hover:border-purple-600 focus:bg-purple-600 focus:border-purple-600 focus:outline-hidden focus:ring-0 me-2">
    Link with href
    </a>
    <button @click="open=!open" class="py-2 uajskeiolksb inline-block text-center rounded-sm leading-5 text-gray-100 bg-purple-500 border border-purple-500 hover:text-white hover:bg-purple-600 hover:ring-0 hover:border-purple-600 focus:bg-purple-600 focus:border-purple-600 focus:outline-hidden focus:ring-0" type="button">
    Button with data-target
    </button>
  </p>
  <div x-show="open" x-collapse class="border uajskeiolksb py-3 my-2 dark:border-gray-700">
    Some placeholder content for the collapse component. This panel is hidden by default but revealed when the user activates the relevant trigger.
  </div>
</div>
Copy
  • Support
  • Help Center
  • Privacy
  • Terms of Service

Dashpro | All right reserved