https://wiki.esmrmb.org/index.php?action=history&feed=atom&title=User%3AMriFranz%2FTest%2Fstyle.css 2026-10-18T20:07:53Z Revision history for this page on the wiki MediaWiki 1.42.1 https://wiki.esmrmb.org/index.php?title=User:MriFranz/Test/style.css&diff=831&oldid=prev 2025-03-24T13:27:52Z

<p>Created page with &quot;<span dir="auto"><span class="autocomment">Hide the checkbox: </span> .collapsible-checkbox { display: none; } <span dir="auto"><span class="autocomment">Style the label/header that will be clicked: </span> .collapsible-label { display: block; font-weight: bold; background-color: #f1f1f1; padding: 10px; cursor: pointer; border-radius: 4px; margin-bottom: 0; position: relative; } /* Add a pl...&quot;</span></span></p> <p><b>New page</b></p><div>/* Hide the checkbox */<br /> .collapsible-checkbox {<br /> display: none;<br /> }<br /> <br /> /* Style the label/header that will be clicked */<br /> .collapsible-label {<br /> display: block;<br /> font-weight: bold;<br /> background-color: #f1f1f1;<br /> padding: 10px;<br /> cursor: pointer;<br /> border-radius: 4px;<br /> margin-bottom: 0;<br /> position: relative;<br /> }<br /> <br /> /* Add a plus/minus icon */<br /> .collapsible-label::after {<br /> content: &#039;+&#039;;<br /> font-size: 18px;<br /> position: absolute;<br /> right: 10px;<br /> top: 50%;<br /> transform: translateY(-50%);<br /> }<br /> <br /> /* Style the content container */<br /> .collapsible-content {<br /> max-height: 0;<br /> overflow: hidden;<br /> transition: max-height 0.3s ease;<br /> background-color: #ffffff;<br /> border: 1px solid #ddd;<br /> border-top: none;<br /> border-radius: 0 0 4px 4px;<br /> padding: 0 10px;<br /> box-sizing: border-box;<br /> }<br /> <br /> /* When checkbox is checked, show the content */<br /> .collapsible-checkbox:checked ~ .collapsible-content {<br /> max-height: 500px; /* Adjust based on your content&#039;s potential height */<br /> padding: 10px;<br /> }<br /> <br /> /* Change plus to minus when open */<br /> .collapsible-checkbox:checked ~ .collapsible-label::after {<br /> content: &#039;-&#039;;<br /> }<br /> <br /> /* Optional: Hover effect */<br /> .collapsible-label:hover {<br /> background-color: #e8e8e8;<br /> }</div>

MriFranz