Toggle not working in overlay opened from a page with tabs

[biljanap]

I am using Middle screen overlay. The overlay contains <details> element that I am trying to expand/collapse using toggle plugin. The "On" or "Toggle" functionality works initially to expand <details> elements but "Off" or "Toggle" can't collapse them back.

This only happens if the overlay is opened from the page that contains tabs. If I remove class="wb-tabs", the toggle is working.

[biljanap]

I should have added that I am ajaxing the modal including toggle buttons. If I ajax just the content but have the buttons on the page from which I am making ajax call, things are working fine.

[biljanap]

....and I just noticed that all works as it should if I add class wb-prettify anywhere on the page.

[duboisp]

You might want to specified the CSS selector in your toggle plugin configuration. Like a CSS selector that only target your middle screen overlay.

It is the first item in the configuration option in the toggle documentation: https://wet-boew.github.io/wet-boew/docs/ref/toggle/toggle-en.html

[biljanap]

@duboisp
This is my code:

<div id="toggle-items">
  <div class="btn-group">
    <button type="button" class="btn btn-primary wb-toggle" data-toggle='{"selector": ".toggle-element", "parent": "#toggle-items", "type": "on"}'>Open all</button>
    <button type="button" class="btn btn-primary wb-toggle" data-toggle='{"selector": ".toggle-element", "parent": "#toggle-items", "type": "off"}'>Close all</button>
  </div>
  <details id="collapse-1" class="toggle-element">
    <summary>Collapse 1</summary>
    <p>Collapse 1 content</p>
  </details>
  <details id="collapse-2" class="toggle-element">
    <summary>Collapse 2</summary>
    <p>Collapse 2 content</p>
  </details>
  <details id="collapse-3" class="toggle-element">
    <summary>Collapse 3</summary>
    <p>Collapse 3 content</p>
  </details>
</div>

...but it's not working unless I have class wb-prettify.

[biljanap]

Tested it in 3 browsers:
Firefox v.52.9.0:
On - expands elements
Off - does not collapse elements

Chrome v.72.0.3626.109
On - expands elements
Off - does not collapse elements

IE 11
On - does not expand elements
Off - does not collapse elements

[ghost]

Using the code below I had no issues.

<div class="wb-tabs">
	<div class="tabpanels">
		<details id="details-panel1">
			<summary>Example 1</summary>
			<p>TEST</p>
		</details>
		<details id="details-panel2" open="open">
			<summary>Example 2</summary>
			<p>TEST</p>
		</details>
		<details id="details-panel3">
			<summary>Example 3</summary>
			<p><a href="#mid-screen" aria-controls="mid-screen" class="overlay-lnk" role="button">Middle screen overlay</a></p>
		</details>
	</div>
</div>

<section id="mid-screen" class="wb-overlay modal-content overlay-def wb-popup-mid">
	<header class="modal-header">
		<h2 class="modal-title">Middle screen overlay</h2>
	</header>
	<div class="modal-body">
		<div id="toggle-items">
			<div class="btn-group mrgn-bttm-md">
				<button type="button" class="btn btn-primary wb-toggle" data-toggle='{"selector": ".toggle-element", "parent": "#toggle-items", "type": "on"}'>Open all</button>
				<button type="button" class="btn btn-primary wb-toggle" data-toggle='{"selector": ".toggle-element", "parent": "#toggle-items", "type": "off"}'>Close all</button>
			</div>
			<details id="collapse-1" class="toggle-element">
			<summary>Collapse 1</summary>
			<p>Collapse 1 content</p>
			</details>
			<details id="collapse-2" class="toggle-element">
			<summary>Collapse 2</summary>
			<p>Collapse 2 content</p>
			</details>
			<details id="collapse-3" class="toggle-element">
			<summary>Collapse 3</summary>
			<p>Collapse 3 content</p>
			</details>
		</div>
	</div>
</section>

[ghost]

That was with the latest version of WET what are you using?