Example: Header groups
ByRei_EliseBox also support a group function, with this function only one header will be open at the same time.
This can produce some cool effects or simple save you space on your webpage or apps.
You can use several groups at the same webpage, simple define a groupname with the classname EliseBox_group-... and use the same groupname for the Objects.
Live Example
Header: 1
This is the Content from "Header: 1", you can only open one header at once.
But you can close all header at the same time.
Simple select another header to close this header and open the other header.
Header: 2
This is the Content from "Header: 2", you can only open one header at once.
But you can close all header at the same time.
Simple select another header to close this header and open the other header.
Header: 3
This is the Content from "Header: 3", you can only open one header at once.
But you can close all header at the same time.
Simple select another header to close this header and open the other header.
Header: 4
This is the Content from "Header: 4", you can only open one header at once.
But you can close all header at the same time.
Simple select another header to close this header and open the other header.
Test W3C Validation:
HTML Code
...
<script type="text/javascript" src="byrei-elisebox_0.6.js"></script>
<script type="text/javascript">
if (typeof(ByRei_EliseBox) !== "undefined") {ByRei_EliseBox.config.path.img = '../images/';}
</script>
<h3 class="EliseBox_header-collapse EliseBox_group-1"> Header: 1 </h3>
<p>
This is the Content from "Header: 1", you can only open one header at once.<br>
But you can close all header at the same time.<br>
Simple select another header to close this header and open the other header.<br>
</p>
<h3 class="EliseBox_header-expand EliseBox_group-1"> Header: 2 </h3>
<p>
This is the Content from "Header: 2", you can only open one header at once.<br>
But you can close all header at the same time.<br>
Simple select another header to close this header and open the other header.<br>
</p>
<h3 class="EliseBox_header-expand EliseBox_group-1"> Header: 3 </h3>
<p>
This is the Content from "Header: 3", you can only open one header at once.<br>
But you can close all header at the same time.<br>
Simple select another header to close this header and open the other header.<br>
</p>
<h3 class="EliseBox_header-expand EliseBox_group-1"> Header: 4 </h3>
<p>
This is the Content from "Header: 4", you can only open one header at once.<br>
But you can close all header at the same time.<br>
Simple select another header to close this header and open the other header.<br>
</p>
...