Example: Header hover
Its also possible for ByRei EliseBox to add an hover image, when the User get over the "plus" or "minus".
You need simple an additional Image "_hover.png" and add the class "EliseBox_hover" to the Element.
Live Example
Position: Right (Default) / hover
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 / hover
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) /hover </h1>
<h4 class="EliseBox_header-expand EliseBox_hover">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_hover">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 / hover </h3>
<h4 class="EliseBox_header-expand EliseBox_pos-left EliseBox_hover">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 EliseBox_hover">Test 2: Click the "plus" to expand the Content </h4>
<p>
The Content will disappear after you click the "minus".<br>
</p>
...