DEV Community

Cover image for Hyva: Display PDP Sections as Tabs on Desktop and Accordion on Mobile
Evrig_Solutions
Evrig_Solutions

Posted on

1

Hyva: Display PDP Sections as Tabs on Desktop and Accordion on Mobile

In this tutorial, Today We will explain How to make PDP Sections display as Tabs in Desktop View and Accordion in Mobile View instead of Cards.

**Step 1: Add the Code
**You just copy and paste the below code into your PHTML File, CMS block, or CMS Page.

<div x-data="{ tab: 'tab1' }" id="tab_wrapper">
   <div class="text-center border-gray-300 border-b hidden md:flex md:justify-cente`r">
       <div :class="{ 'text-red-800': tab === 'tab1' }" @click.prevent="tab = 'tab1'" class="text-xl mx-4 font-bold text-black cursor-pointer">TAB-1</div>
       <div :class="{ 'text-red-800': tab === 'tab2' }" @click.prevent="tab = 'tab2'" class="text-xl mx-4 font-bold text-black cursor-pointer">TAB-2</div>
   </div>
   <div>
       <div class="md:hidden text-xl font-bold cursor-pointer p-2 text-black bg-gray-100 border border-gray-300"
            @click="tab = 'tab1'"
            :class="{ 'active text-red-800': tab === 'tab1' }">
           TAB-1
       </div>
       <div x-show="tab === 'tab1'" class="p-3">
           <h2>TAB-1 Content</h2>
           <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries,</p>
       </div>
   </div>
   <div>
       <div class="md:hidden text-xl font-bold cursor-pointer p-2 text-black bg-gray-100 border border-gray-300"
            @click="tab = 'tab2'"
            :class="{ 'active text-red-800': tab === 'tab2' }">
           TAB-2
       </div>
       <div x-show="tab === 'tab2'" class="p-3">
           <h2>TAB-2 Content</h2>
           <p> but also the leap into electronic typesetting, remaining unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum. </p>
       </div>
   </div>
</div>
```



**Step 2: Run the Commands
**Run the below commands to see your changes
`bin/magento cache:clean`



```
npm run build-prod
```



- Thebin/magento cache:clean command clears your Magento cache.

- The npm run build-prod command builds your Tailwind styles in the theme directory:
 app/design/frontend/Vendor/default/web/tailwind

**Advantages of This Approach
**
- Achieve this without adding any external JS/CSS.
- Minimal use of Tailwind classes and Alpine.
- Customizable: You can change the design to meet your requirements.
- Mobile friendly: It will convert accordion in the mobile view.
- Responsive: This code adapts its layout to different screen sizes, ensuring your code looks great on all devices.

**_[Get in Touch
](https://www.evrig.com/contact-us/)_**If you’re looking to optimize your PDP for better functionality, speed and user experience, reach out to us today! Whether it’s [Hyva](https://www.evrig.com/magento-2-hyva-theme-development-company/), custom development or performance optimization, we can help you achieve your business goals.

Contact Evrig for a free consultation and see how we can help you create seamless, engaging e-commerce solutions!
Enter fullscreen mode Exit fullscreen mode

Billboard image

The fastest way to detect downtimes

Join Vercel, CrowdStrike, and thousands of other teams that trust Checkly to streamline monitoring.

Get started now

Top comments (0)

Heroku

This site is built on Heroku

Join the ranks of developers at Salesforce, Airbase, DEV, and more who deploy their mission critical applications on Heroku. Sign up today and launch your first app!

Get Started

👋 Kindness is contagious

Explore a sea of insights with this enlightening post, highly esteemed within the nurturing DEV Community. Coders of all stripes are invited to participate and contribute to our shared knowledge.

Expressing gratitude with a simple "thank you" can make a big impact. Leave your thanks in the comments!

On DEV, exchanging ideas smooths our way and strengthens our community bonds. Found this useful? A quick note of thanks to the author can mean a lot.

Okay