Dexo - Premium Admin Template

Collapse

Default Open

You can use this component to show and hide the informantion. You can set open using oepn class.

Open Accordions

You can set accordion by default open using open class.

This is simple accordion for collapse.

This is simple accordion to oepn & close.

  <div class="flex flex-col flex-wrap gap-2">
   <div class="accordionWrapper">
    <div class="accordionItem open">
       <h4 class="accordionItemHeading bg-primary">Open Accordions </h4>
       <div class="accordionItemContent">
         <p> You can set accordion by default open using open class. </p>
         <p> This is simple accordion for collapse. </p>
         <p> This is simple accordion to oepn & close. </p>
       </div>
    </div>
   </div> 
</div>

Default Close

You can set this component default close using close class.

Close Accordions

You can set accordion by default close using open class.

This is simple accordion for oepn & close collapse.

Close Items

You can set the list inside the accordion.

List item
List item
List item

Close Accordions

You can set accordion by default close using open class.

This is simple accordion for oepn & close collapse.

  <div class="flex flex-col flex-wrap gap-2">
   <div class="accordionWrapper">
    <div class="accordionItem close">
       <h4 class="accordionItemHeading bg-primary"> Close Accordions </h4>
       <div class="accordionItemContent">
         <p> You can set accordion by default close using open class. </p>
         <p> This is simple accordion for oepn & close collapse. </p>
       </div>
    </div>
    <div class="accordionItem close">
       <h4 class="accordionItemHeading bg-primary"> Close Items </h4>
       <div class="accordionItemContent">
         <p> You can set the list inside the accordion. </p>
         <ul> 
           <li> List item </li>
           <li> List item </li>
           <li> List item </li>
         </ul>
       </div>
    </div>
    <div class="accordionItem close">
       <h4 class="accordionItemHeading bg-primary"> Close Accordions </h4>
       <div class="accordionItemContent">
         <p> You can set accordion by default close using open class. </p>
         <p> This is simple accordion for oepn & close collapse. </p>
       </div>
    </div>
   </div> 
</div>

Default Collapse

You can set this component default close using close class.

Open Accordions

You can set accordion by default close using open class.

This is simple accordion for oepn & close collapse.

Close Items

You can set the list inside the accordion.

List item
List item
List item

Close Accordions

To expand, click on it.

  <div class="flex flex-col flex-wrap gap-2">
   <div class="accordionWrapper">
    <div class="accordionItem open">
       <h4 class="accordionItemHeading bg-gray-light text-title flex justify-between"> Open Accordions </h4>
         <div class="collapse-icon">
           +SVG_ICON("Sort-Vertical","w-[20px] h-[20px] fill-white")
         </div>
       <div class="accordionItemContent">
         <p> You can set accordion by default close using open class. </p>
         <p> This is simple accordion for oepn & close collapse. </p>
       </div>
    </div>
    <div class="accordionItem close">
       <h4 class="accordionItemHeading bg-gray-light text-title"> Open Item </h4>
         <div class="collapse-icon">
           +SVG_ICON("Sort-Vertical","w-[20px] h-[20px] fill-white")
         </div>
       <div class="accordionItemContent">
         <p> You can set the list inside the accordion. </p>
         <ul> 
           <li> List item </li>
           <li> List item </li>
           <li> List item </li>
         </ul>
       </div>
    </div>
    <div class="accordionItem close">
       <h4 class="accordionItemHeading bg-gray-light text-title"> Close Accordions </h4>
         <div class="collapse-icon">
           +SVG_ICON("Sort-Vertical","w-[20px] h-[20px] fill-white")
         </div>
       <div class="accordionItemContent">
         <p> To expand, click on it. </p>
       </div>
    </div>
   </div> 
</div>

Flush Collapse

You can set this component background color using bg-* class.

Accordions

You can set accordion by default close using open class.

This is simple accordion for oepn & close collapse.

Close Items

You can set the list inside the accordion.

List item
List item
List item

Close Accordions

To expand, click on it.

  <div class="flex flex-col flex-wrap gap-2">
   <div class="accordionWrapper">
    <div class="accordionItem open">
       <h4 class="accordionItemHeading"> Accordions </h4>
       <div class="accordionItemContent">
         <p> You can set accordion by default close using open class. </p>
         <p> This is simple accordion for oepn & close collapse. </p>
       </div>
    </div>
    <div class="accordionItem close">
       <h4 class="accordionItemHeading"> Open Item </h4>
       <div class="accordionItemContent">
         <p> You can set the list inside the accordion. </p>
         <ul> 
           <li> List item </li>
           <li> List item </li>
           <li> List item </li>
         </ul>
       </div>
    </div>
    <div class="accordionItem close">
       <h4 class="accordionItemHeading"> Close Accordions </h4>
       <div class="accordionItemContent">
         <p> To expand, click on it. </p>
       </div>
    </div>
   </div> 
</div>

Colored collapse

You can set different color for different accordion using bg-* class.

Close Accordions

You can set color for accordion with the help of bg-* class.

This is simple accordion for oepn & close collapse.

Open Items

You can set different colors for accordion.

  <div class="flex flex-col flex-wrap gap-2">
   <div class="accordionWrapper">
    <div class="accordionItem close">
       <h4 class="accordionItemHeading bg-secondary"> Close Accordions </h4>
       <div class="accordionItemContent">
         <p> You can set color for accordion with the help of bg-* class. </p>
         <p> This is simple accordion for oepn & close collapse. </p>
       </div>
    </div>
    <div class="accordionItem close">
       <h4 class="accordionItemHeading bg-warning"> Open Items </h4>
       <div class="accordionItemContent">
         <p> You can set different colors for accordion. </p>
       </div>
    </div>
   </div> 
</div>

Collapse With Arrow

You can set different color for different accordion using bg-* class.

Close Accordions

You can set color for arrow inside the accordion.

This is simple accordion for arrow collapse.

Close Items

You can set different arrow for accordion.

  <div class="flex flex-col flex-wrap gap-2">
   <div class="accordionWrapper">
    <div class="accordionItem close">
       <h4 class="accordionItemHeading flex justify-between bg-primary"> Close Accordions </h4>
         <div class="collapse-icon">
           +SVG_ICON("Alt-Arrow-Down","w-[20px] h-[20px] fill-white")
         </div>
       <div class="accordionItemContent">
         <p> You can set color for arrow inside the accordion. </p>
         <p> This is simple accordion for arrow collapse. </p>
       </div>stroke
    </div>
    <div class="accordionItem open">
       <h4 class="accordionItemHeading bg-primary"> Close Items </h4>
         <div class="collapse-icon">
           +SVG_ICON("Alt-Arrow-Down","w-[20px] h-[20px] fill-white")
         </div>
       <div class="accordionItemContent">
         <p> You can set different arrow for accordion. </p>
       </div>
    </div>
   </div> 
</div>

Collapse With Icon

You can set icon with collapse close class.

Open Accordions

You can set accordion by default close using close class with icon.

This is simple accordion for icons collapse.

Close Items

You can set the list inside the accordion.

List item
List item
List item

Close Accordions

To expand, click on it.

  <div class="flex flex-col flex-wrap gap-2">
   <div class="accordionWrapper">
    <div class="accordionItem open ">
       <h4 class="accordionItemHeading flex flex-row-reverse justify-end items-center btn border border-primary !text-primary"> Open Accordions </h4>
         <div>
           +SVG_ICON("Sort-Vertical","w-[20px] h-[20px] !fill-white mr-2 ")
         </div>
       <div class="accordionItemContent border-1 border-primary">
         <p> You can set accordion by default close using close class with icon. </p>
         <p> This is simple accordion for icons collapse. </p>
       </div>
    </div>
    <div class="accordionItem close">
       <h4 class="accordionItemHeading flex flex-row-reverse justify-end items-center btn border border-secondary !text-secondary"> Open Item </h4>
         <div>
           +SVG_ICON("Sort-Vertical","w-[20px] h-[20px] !fill-white mr-2 ")
         </div>
       <div class="accordionItemContent border-1 border-secondary">
         <p> You can set the list inside the accordion. </p>
         <ul> 
           <li> List item </li>
           <li> List item </li>
           <li> List item </li>
         </ul>
       </div>
    </div>
    <div class="accordionItem close">
       <h4 class="accordionItemHeading flex flex-row-reverse justify-end items-center btn border border-info !text-info"> Close Accordions </h4>
         <div>
           +SVG_ICON("Sort-Vertical","w-[20px] h-[20px] fill-white mr-2 ")
         </div>
       <div class="accordionItemContent border-1 border-info">
         <p> To expand, click on it. </p>
       </div>
    </div>
   </div> 
</div>

Arrow Style

You can set Different type of arrow with collapse close class.

Open Accordions

You can set different arrow with collapse.

This is simple accordion with icons collapse.

Close Items

You can set the list inside the accordion.

List item
List item
List item

Close Accordions

To expand, click on it.

  <div class="flex flex-col flex-wrap gap-2">
   <div class="accordionWrapper">
    <div class="accordionItem open">
       <h4 class="accordionItemHeading flex justify-between bg-secondary"> Open Accordions </h4>
         <div class="collapse-icon">
           +SVG_ICON("Sort-Vertical","w-[20px] h-[20px] fill-white")
         </div>
       <div class="accordionItemContent">
         <p> You can set different arrow with collapse </p>
         <p> This is simple accordion with icons collapse. </p>
       </div>
    </div>
    <div class="accordionItem close">
       <h4 class="accordionItemHeading flex justify-between bg-secondary"> Open Item </h4>
         <div class="collapse-icon">
            +SVG_ICON("Arrow-Down-Circle","w-[20px] h-[20px] fill-white")
         </div>
       <div class="accordionItemContent">
         <p> You can set the list inside the accordion. </p>
         <ul> 
           <li> List item </li>
           <li> List item </li>
           <li> List item </li>
         </ul>
       </div>
    </div>
    <div class="accordionItem close">
       <h4 class="accordionItemHeading flex justify-between bg-secondary"> Close Accordions </h4>
         <div>
           +SVG_ICON("Alt-Arrow-Down","w-[20px] h-[20px] fill-white")
         </div class="collapse-icon">
       <div class="accordionItemContent">
         <p> To expand, click on it. </p>
       </div>
    </div>
   </div> 
</div>

Hand crafted & made with

Collapse

Default Open

Open Accordions

Default Close

Close Accordions

Close Items

Close Accordions

Default Collapse

Open Accordions

Close Items

Close Accordions

Flush Collapse

Accordions

Close Items

Close Accordions

Colored collapse

Close Accordions

Open Items

Collapse With Arrow

Close Accordions

Close Items

Collapse With Icon

Open Accordions

Close Items

Close Accordions

Arrow Style

Open Accordions

Close Items

Close Accordions

Template Mode

Layout Type

Sidebar Type

Notification

Dmitriy Groshev

Sufiya Elija

Janis Evans

Mukrani Pabelo

Josephin Water

Janis Evans

Sufiya Elija

Notification

New Review Receive

Transaction $250 Success

Order Place Success

Netflix Subscription Expires

Congratulations You Won $2500

Latest Updates On You Phone

Cart Items (25)

Flower Pot

Iphone Max pro

Royal Party Glass

Water Proof Watch

Traveling Duffle Bag

Add Total

Helen Walter

Collapse

Default Open

Open Accordions

Default Close

Close Accordions

Close Items

Close Accordions

Default Collapse

Open Accordions

Close Items

Close Accordions

Flush Collapse

Accordions

Close Items

Close Accordions

Colored collapse

Close Accordions

Open Items

Collapse With Arrow

Close Accordions

Close Items

Collapse With Icon

Open Accordions

Close Items

Close Accordions

Arrow Style

Open Accordions

Close Items

Close Accordions

Template Mode

Layout Type

Sidebar Type