---
{
	"title": "Details closed on medium view and down",
	"language": "en",
	"category": "Plugins",
	"description": "Keep selected details elements closed on medium view and smaller.",
	"tag": "details-close",
	"parentdir": "details-close",
	"altLangPrefix": "details-close",
	"dateModified": "2021-11-29"
}
---
<div class="alert alert-warning">
	<h2>Unstable feature</h2>
	<p>To be used at <strong>your own risk</strong>. This feature described below can be removed in any subsequent minor/major release</p>
	<p><small><a href="https://wet-boew.github.io/wet-boew-documentation/decision/7.html">Learn more about the design decision around provisional features.</a></small></p>
	<p><small><a href="../../docs/ref/provisional-en.html">Check other provisional features available.</a></small></p>
</div>

<h2>Other example</h2>
<ul>
	<li><a href="details-close-en.html">Default example</a></li>
</ul>

<h2>Example of <code>details</code> element kept closed on medium viewport and down (md, sm, xs and xxs)</h2>
<p>Resize your browser to view the plugin at play. Note that setting a different viewport than default on the first instance of <code>.wb-details-close</code> will repeat same setting for all instances of the plugin on the page.</p>
<div class="row">
	<div class="col-md-6">
		<details class="provisional wb-details-close" data-breakpoint="md" open>
			<summary>I am closed on medium view and down</summary>
			<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum rhoncus, neque accumsan faucibus ultricies, libero massa mollis neque, et mollis libero enim a ligula. Ut dictum tempor luctus. Ut convallis vehicula sapien a facilisis. Morbi eget lectus efficitur, finibus metus eu, feugiat felis. Praesent sodales elit sed finibus pharetra. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Praesent quis sem lacinia, accumsan sem et, lacinia turpis.</p>
		</details>
	</div>
	<div class="col-md-6">
		<details class="provisional wb-details-close" open>
			<summary>I follow same settings as the first instance</summary>
			<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum rhoncus, neque accumsan faucibus ultricies, libero massa mollis neque, et mollis libero enim a ligula. Ut dictum tempor luctus. Ut convallis vehicula sapien a facilisis. Morbi eget lectus efficitur, finibus metus eu, feugiat felis. Praesent sodales elit sed finibus pharetra. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Praesent quis sem lacinia, accumsan sem et, lacinia turpis.</p>
		</details>
	</div>
</div>

<h3>Source code</h3>
<pre><code>&lt;details class="provisional wb-details-close" data-breakpoint="md" open&gt;
	&lt;summary&gt;I am closed on medium view and down&lt;/summary&gt;
	&lt;p&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum rhoncus, neque accumsan faucibus ultricies, libero massa mollis neque, et mollis libero enim a ligula. Ut dictum tempor luctus. Ut convallis vehicula sapien a facilisis. Morbi eget lectus efficitur, finibus metus eu, feugiat felis. Praesent sodales elit sed finibus pharetra. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Praesent quis sem lacinia, accumsan sem et, lacinia turpis.&lt;/p&gt;
&lt;/details&gt;
</code></pre>
