Example: Header left and right
This example show the simplest possibility of ByRei EliseBox, you can make every H1 - H6 Element as an dynamic Placeholder.
The script simple add the "expand" and "collapse" icon to the header and hide or show the DIV or P Element after the Header Element on Request.
Live Example
Position: Right (Default)
Test 1: Click the "minus" to collapse the Content
Here you see the Content from "Test 1".
Test 2: Click the "plus" to expand the Content
The Content will disappear after you click the "minus".
Position: Left
Test 1: Click the "minus" to collapse the Content
Here you see the Content from "Test 1".
Test 2: Click the "plus" to expand the Content
The Content will disappear after you click the "minus".
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> Position: Right (Default) </h1>
<h4 class="EliseBox_header-expand">Test 1: Click the "minus" to collapse the Content </h4>
<p>
Here you see the Content from "Test 1".<br>
</p>
<h4 class="EliseBox_header-collapse">Test 2: Click the "plus" to expand the Content </h4>
<p>
The Content will disappear after you click the "minus".<br>
</p>
<h3> Position: Left </h3>
<h4 class="EliseBox_header-expand EliseBox_pos-left">Test 1: Click the "minus" to collapse the Content </h4>
<p>
Here you see the Content from "Test 1".<br>
</p>
<h4 class="EliseBox_header-collapse EliseBox_pos-left">Test 2: Click the "plus" to expand the Content </h4>
<p>
The Content will disappear after you click the "minus".<br>
</p>
...