How to open specific collapsible panel inside modal by clicking in link I'm trying to make a layered filter modal, but i can not create links to appropriate panels in this modal.
We use alpine.js and magento 2 for this. Here is our code.
It would be great if you could help us
<section x-cloak x-data="{open: false}"
:class="open ? 'overflow-hidden ' : 'overflow-visible '">
<div class="border-b border-container-lighter flex pb-6">
<?php foreach ($block->getFilters() as $filter): ?>
<?php if ($filter->getItemsCount()): ?>
<button
@click="open = true"
class="flex-initial items-center text-sm py-2.5 px-4 rounded-full bg-gray-100 mr-2">
<?= $escaper->escapeHtml(__($filter->getName())) ?>
</button>
<?php endif; ?>
<?php endforeach; ?>
</div>
<?= $block->getChildHtml('state') ?>
<div role="dialog"
aria-labelledby="modal1_label"
aria-modal="true"
tabindex="0"
x-show="open"
@click.away="open = false"
class="fixed inset-x-0 bottom-0 md:inset-x-auto md:inset-y-0 md:right-0 z-30 flex max-w-full">
<div class="backdrop"
x-show="open"
x-transition:enter="ease-in-out duration-500"
x-transition:enter-start="opacity-0"
x-transition:enter-end="opacity-100"
x-transition:leave="ease-in-out duration-500"
x-transition:leave-start="opacity-100"
x-transition:leave-end="opacity-0"
@click="open = false"
aria-label="Close panel"></div>
<div data-modal-document
@click.stop=""
x-show="open"
x-transition:enter="transform transition ease-in-out duration-500 sm:duration-700"
x-transition:enter-start="translate-y-full sm:-translate-y-0 sm:translate-x-full"
x-transition:enter-end=" sm:translate-x-0"
x-transition:leave="transform transition ease-in-out duration-500 sm:duration-700"
x-transition:leave-start="sm:translate-x-0"
x-transition:leave-end="translate-y-full sm:-translate-y-0 sm:translate-x-full"
class="bg-white relative w-screen max-w-md shadow-2xl">
<div
x-show="open"
x-transition:enter="ease-in-out duration-500"
x-transition:enter-start="opacity-0"
x-transition:enter-end="opacity-100"
x-transition:leave="ease-in-out duration-500"
x-transition:leave-start="opacity-100"
x-transition:leave-end="opacity-0" class="absolute top-0 right-0 flex p-2 mt-2">
<button @click="open = false;" aria-label="Close panel"
class="p-2 text-gray-300 transition duration-150 ease-in-out hover:text-black">
<svg class="w-6 h-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round"
stroke-width="2" d="M6 18L18 6M6 6l12 12">
</path>
</svg>
</button>
</div>
<div class="flex flex-col h-full py-6 space-y-6 bg-white shadow-xl">
<header class="px-4 sm:px-6">
<h2 id="cart-drawer-title" class="text-lg font-medium leading-7 text-gray-900">
<?= $escaper->escapeHtml(__('Filtern und sortieren')) ?>
</h2>
</header>
<div class="relative grid gap-6 px-6 py-6 overflow-y-auto bg-white
sm:gap-8 sm:px-6 border-container">
<div class="w-full">
<div class="container block 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-content filter-content pt-3" >
<?= $block->getChildHtml('state') ?>
<?php foreach ($block->getFilters() as $filter): ?>
<?php if ($filter->getItemsCount()): ?>
<div class="filter-option my-6" id="filter-<?= $escaper->escapeHtml(__($filter->getName())) ?>" x-data="{ open: false }">
<div
class="filter-options-title flex justify-between items-center cursor-pointer hover:text-secondary-darker border-container"
:class="{ 'border-b pb-4': open }"
@click="open = !open"
@open-dropdown.window=" open = true"
@click.away="open = false">
<span class="title text-md md:text-base font-light">
<?= $escaper->escapeHtml(__($filter->getName())) ?>
</span>
<span class="">
<svg width="24" height="24" viewBox="0 0 24 24" fill="none"
xmlns="http://www.w3.org/2000/svg"
class="transition-transform transform duration-300 ease-in-out"
:class="open ? 'rotate-180' : ''">
<path d="M19 9L12 16L5 9" stroke="#4A5568" stroke-width="2" stroke-linecap="round"
stroke-linejoin="round"/>
</svg>
</span>
</div>
<div class="filter-options-content pt-3 hidden"
:class="{ 'hidden': !open , 'block': 'open' }"
>
<?= /* @noEscape */
$block->getChildBlock('renderer')->render($filter) ?>
</div>
</div>
<?php endif; ?>
<?php endforeach; ?>
</div>
How to open specific collapsible panel inside modal by clicking in link I'm trying to make a layered filter modal, but i can not create links to appropriate panels in this modal.