I'm using Shopify Polaris CSS framework but I do not use React, I want to use jQuery.
I have this html:
<div class="Polaris-ActionMenu">
<div>
<div class="Polaris-ActionMenu-RollupActions__RollupActivator">
<button class="Polaris-Button Polaris-Button-sel" type="button" tabindex="0" aria-controls="Polarispopover1" aria-owns="Polarispopover1" aria-expanded="false">
<span class="Polaris-Button__Content">
<span class="Polaris-Button__Text">More actions</span>
<span class="Polaris-Button__Icon">
<div class="">
<span class="Polaris-Icon">
<span class="Polaris-Text--root Polaris-Text--bodySm Polaris-Text--regular Polaris-Text--visuallyHidden">
</span>
<svg viewBox="0 0 20 20" class="Polaris-Icon__Svg" focusable="false" aria-hidden="true">
<path d="M13.098 8h-6.196c-.751 0-1.172.754-.708 1.268l3.098 3.432c.36.399 1.055.399 1.416 0l3.098-3.433c.464-.513.043-1.267-.708-1.267Z">
</path>
</svg>
</span>
</div>
</span>
</span>
</button>
</div>
<div>
<div data-portal-id="popover-Polarisportal1">
<div class="Polaris-PositionedOverlay Polaris-Popover__PopoverOverlay Polaris-Popover__PopoverOverlay--open">
<div class="Polaris-Popover" data-polaris-overlay="true">
<div class="Polaris-Popover__FocusTracker" tabindex="0"></div>
<div class="Polaris-Popover__Wrapper">
<div tabindex="-1" class="Polaris-Popover__Content" style="display: none;">
<div class="Polaris-Popover__Pane Polaris-Scrollable Polaris-Scrollable--vertical Polaris-Scrollable--horizontal" data-polaris-scrollable="true">
<div class="Polaris-ActionList">
<div class="Polaris-ActionList__Section--withoutTitle">
<ul class="Polaris-ActionList__Actions" role="menu" tabindex="-1">
<li role="presentation"><a href="#" type="button" class="Polaris-ActionList__Item" role="menuitem"><span class="Polaris-ActionList__Content"><span class="Polaris-ActionList__Text">Duplicate</span></span></a></li>
</ul>
</div>
</div>
</div>
</div>
</div>
<div class="Polaris-Popover__FocusTracker" tabindex="0"></div>
</div>
</div>
</div>
</div>
</div>
</div>
to open the Popover I write this jQuery code:
$('.Polaris-Button-sel').click(function() {
$(this).closest('.Polaris-Popover__Content').toggle();
});
and
$('.Polaris-Button-sel').click(function() {
$(this).next('.Polaris-Popover__Content').toggle();
});
but both don't work. How can I open Popover using jQuery code?