Accordion clickable on mobile and always open on desktop?

Question

In alpine.js how can I reach this?

<?php
/**
 * Hyvä Themes - https://hyva.io
 * Copyright © Hyvä Themes 2020-present. All rights reserved.
 * This product is licensed per Magento install
 * See https://hyva.io/license
 */

declare(strict_types=1);

use Hyva\Theme\Model\ViewModelRegistry;
use Hyva\Theme\ViewModel\HeroiconsOutline;
use Magento\Framework\Escaper;
use Magento\LayeredNavigation\Block\Navigation;

// phpcs:disable Generic.Files.LineLength.TooLong

/** @var Navigation $block */
/** @var Escaper $escaper */
/** @var ViewModelRegistry $viewModels */

/** @var HeroiconsOutline $heroicons */
$heroicons = $viewModels->require(HeroiconsOutline::class);
?>
<?php if ($block->canShowBlock()): ?>
    <div class="block border border-container shadow-md md:shadow-none bg-container-darker p-4 md:border-0 md:bg-transparent md:py-0 md:px-0 my-6"
         x-data="initLayeredNavigation()"
         x-init="checkIsMobileResolution()"
         @resize.window.debounce="checkIsMobileResolution()"
         @visibilitychange.window.debounce="checkIsMobileResolution()"
    >
        <div class="block-title h-10 flex items-center justify-between"
             @click="blockOpen = !blockOpen"
        >
            <span class="md:hidden text-primary text-sm font-medium uppercase">
                <?= $escaper->escapeHtml(__('Filters')) ?>
            </span>
            <span class="py-1 px-1 bg-container-lighter rounded border border-container-darker hidden"
                  :class="{ 'block' : isMobile, 'hidden': !isMobile }">
                <?= $heroicons->chevronDownHtml(
                    'transition-transform transform duration-300 ease-in-out',
                    24,
                    24,
                    [":class" => "{ 'rotate-180': blockOpen }"]
                ); ?>
            </span>
        </div>
        <div class="block-content filter-content pt-3 mt-6 hidden md:block" :class="{ 'hidden' : isMobile && !blockOpen }">
            <?= $block->getChildHtml('state') ?>
            <?php foreach ($block->getFilters() as $filter): ?>
                <?php if ($filter->getItemsCount()): ?>
                    <div class="filter-option card mb-10"
                         x-data="{ open : false }">
                        <div
                            class="filter-options-title flex justify-between items-center cursor-pointer hover:text-secondary-darker border-black"
                            :class="{ 'border-b-2 pb-2': open }"
                            @click="open = !open">
                            <span class="title text-md font-medium">
                                <?= $escaper->escapeHtml(__($filter->getName())) ?>
                            </span>
                            <span class="py-1 px-1 rounded border border-container lg:hidden" >
                                <?= $heroicons->chevronDownHtml(
                                    'transition-transform transform duration-300 ease-in-out',
                                    24,
                                    24,
                                    [":class" => "{ 'rotate-180': open }"]
                                ); ?>
                            </span>
                        </div>
                        <template x-if="open">
                            <div class="filter-options-content pt-3">
                                <?= /* @noEscape */ $block->getChildBlock('renderer')->render($filter) ?>
                            </div>
                        </template>
                    </div>
                <?php endif; ?>
            <?php endforeach; ?>
        </div>
    </div>
    <script>
        function initLayeredNavigation() {
            return {
                isMobile: false,
                blockOpen: false,
                checkIsMobileResolution() {
                    this.isMobile = window.matchMedia('(max-width: 768px)').matches;
                  
                }

            }
        }
    </script>
<?php endif; ?>

I've tried with an expression inside the click event, but it doesn't work, any suggest?

I want the accordion to be clickable (open = !open) on mobile, and not clickable and always open on desktop.

Thanks guys!

Answer 1

I've tried in the past to use a css-only solution, like force display:block !important to the collapsed element and pointer-events: none to the clickable title, but in the last work I preferred to use the mediaCheck object to destroy and recreate accordion.

define([
    'jquery',
    'accordion',
    'matchMedia'
], function ($,accordion, mediaCheck) {
    'use strict';

    class DoAccordion {

        static init() {
            this.checkDevice();
        }
        static checkDevice() {
            mediaCheck({
                media: '(min-width: 769px)',
                // Switch to Desktop Version
                entry: function () {
                        $(".to-collapse").accordion("destroy");
                },
                // Switch to Mobile Version
                exit: function () {
                        $(".to-collapse").accordion({
                            openedState: "active",
                            collapsible: true,
                            active: false,
                            animate: {
                                height: "500px",
                                duration: "1000",
                                easing: "easeOutCubic"
                            }
                        });
                    }
                }
            });
        }

    }

    return Footer;
});