* Copyright (c) 2008 Markus Bordihn (markusbordihn.de)
* Dual licensed under the MIT (MIT-LICENSE.txt)
* and GPL (GPL-LICENSE.txt) licenses.

The standard Class names for defined the type and the initial state are:

• EliseBox_header-expand
• EliseBox_header-collapse
• EliseBox_sidebar-expand
• EliseBox_sidebar-collapse

For set the position or floating you can use the following options:

• EliseBox_pos-left
• EliseBox_pos-right
• EliseBox_float-left
• EliseBox_float-right

Features and additional Class names:

• EliseBox_hover
• EliseBox_group-[Group name]
• EliseBox_group_ignore_type
• EliseBox_imgPath-[Alternative Image path]

Header with expand state

EliseBox_header-... can be used on every h1,h2,h3,h4,h5 and h6 object on the web page. It is only needed that the content you would like to expand or hide is in a object after this header. With EliseBox_header-expand the content will not be hide or collapse as initial state.

Example:
...
 <h2 class="EliseBox_header-expand"> Header Test - Click to hide</h2>
 <p> This is the Content to this Header Test</p>
  
 <h2 class="EliseBox_header-expand"> Header Test - Click to hide</h2>
 <div> This is the Content to this Header Test</div>
...
      

Header with collapse state

EliseBox_header-collapse has the difference that the content will hide / collapse as initial state.

Example:
...
 <h2 class="EliseBox_header-collapse"> Header Test - Click to show </h2>
 <p> This is the Content to this Header Test</p>
 
 <h2 class="EliseBox_header-collapse"> Header Test - Click to show </h2>
 <div> This is the Content to this Header Test</div>
...  
      

Sidebar with expand state

EliseBox_sidebar-... can be used on every div and p object. Please keep in mind that you need two Divs that this is working correct.
So please take a look at the example page to understand what this should look in detail.

...
 <div class="EliseBox_sidebar-expand"> 
  <div style="padding: 5px; border: 1px solid #ccc; background-color: #eee;">
   This is a example Content of the Sidebar, in the expand state it will show the content from the beginning.<br>
  </div>
 </div>
...
      

Sidebar with collapse state

EliseBox_sidebar-collapse hast the difference that the content will hide / collapse as initial state.

...
 <div class="EliseBox_sidebar-collapse"> 
  <div style="padding: 5px; border: 1px solid #ccc; background-color: #eee;">
   This is a example Content of the Sidebar, in the collapse state it will show the content only on request.<br>
  </div>
 </div>
...
      

Set the position of the "header" or the "sidebar"

You can simple set the position of the "header" or the "sidebar" over EliseBox_pos-....
Please keep in mind that the "header" only know the position "left" and "right".
But the "sidebar" know the positions "left", "right", "top" and "bottom".

...

 Header
 =======
 
 <h2 class="EliseBox_header-expand EliseBox_pos-left"> Header Test - Click to hide</h2>
 <p> This is the Content to this Header Test. Position: left.</p>
  
 <h2 class="EliseBox_header-expand EliseBox_pos-right"> Header Test - Click to hide</h2>
 <div> This is the Content to this Header Test. Position: Right.</div>

 SideBar
 ========
 
 <div class="EliseBox_sidebar-collapse EliseBox_pos-left"> 
  <div style="padding: 5px; border: 1px solid #ccc; background-color: #eee;">
   This is a example Content of the Sidebar, in the collapse state it will show the content only on request. Position: left.<br>
  </div>
 </div>

 <div class="EliseBox_sidebar-collapse EliseBox_pos-right"> 
  <div style="padding: 5px; border: 1px solid #ccc; background-color: #eee;">
   This is a example Content of the Sidebar, in the collapse state it will show the content only on request. Position: right.<br>
  </div>
 </div>
 
 <div class="EliseBox_sidebar-collapse EliseBox_pos-top"> 
  <div style="padding: 5px; border: 1px solid #ccc; background-color: #eee;">
   This is a example Content of the Sidebar, in the collapse state it will show the content only on request. Position: top.<br>
  </div>
 </div>

 <div class="EliseBox_sidebar-collapse EliseBox_pos-bottom"> 
  <div style="padding: 5px; border: 1px solid #ccc; background-color: #eee;">
   This is a example Content of the Sidebar, in the collapse state it will show the content only on request. Position: bottom.<br>
  </div>
 </div>
...
      

Set float of the "header" or "sidebar"

Normally you can set the "float" over css, but in this case it is not so simple.
For example when you choose the position "left" and make a float to "right" the narrows look in the wrong way.
Because normally an "left" will collapse to the left side, but when your div is "float: right" it will collapse to the right side.

So you can tell ByRei_EliseBox with EliseBox_float-right and EliseBox_float-left to float to the right or left side and use flip images when needed.

...
Header
 =======
 
 <h2 class="EliseBox_header-expand EliseBox_float-left"> Header Test - Click to hide</h2>
 <p> This is the Content to this Header Test. Float: left.</p>
  
 <h2 class="EliseBox_header-expand EliseBox_float-right"> Header Test - Click to hide</h2>
 <div> This is the Content to this Header Test. Float: Right.</div>

 SideBar
 ========
 
 <div class="EliseBox_sidebar-collapse EliseBox_float-left"> 
  <div style="padding: 5px; border: 1px solid #ccc; background-color: #eee;">
   This is a example Content of the Sidebar, in the collapse state it will show the content only on request. Float: left.<br>
  </div>
 </div>

 <div class="EliseBox_sidebar-collapse EliseBox_float-right"> 
  <div style="padding: 5px; border: 1px solid #ccc; background-color: #eee;">
   This is a example Content of the Sidebar, in the collapse state it will show the content only on request. Float: right.<br>
  </div>
 </div>
...
      

Add hover Effect

The command EliseBox_hover add and hover effect to the "sidebar" or the "header".
It simple check for and Image named "..._hover.png" and display it when you move the mouse of the "sidebar" or the "header".

...
 Header
 =======
 
 <h2 class="EliseBox_header-expand EliseBox_pos-left EliseBox_hover"> Header Test - Click to hide</h2>
 <p> This is the Content to this Header Test. Position: left.</p>
  
 <h2 class="EliseBox_header-expand EliseBox_pos-right EliseBox_hover"> Header Test - Click to hide</h2>
 <div> This is the Content to this Header Test. Position: Right.</div>

 SideBar
 ========
 
 <div class="EliseBox_sidebar-collapse EliseBox_pos-left EliseBox_hover"> 
  <div style="padding: 5px; border: 1px solid #ccc; background-color: #eee;">
   This is a example Content of the Sidebar, in the collapse state it will show the content only on request. Position: left.<br>
  </div>
 </div>

 <div class="EliseBox_sidebar-collapse EliseBox_pos-right EliseBox_hover"> 
  <div style="padding: 5px; border: 1px solid #ccc; background-color: #eee;">
   This is a example Content of the Sidebar, in the collapse state it will show the content only on request. Position: right.<br>
  </div>
 </div>
 ...
      

Grouping

With the group option you can defined that only on "sidebar" or "header" should be expand (show) at the same time and from the same group.
So you can make some cool effects with EliseBox_group-.....

With the normal group function the groups only worked on the same type so a "sidebar" group will only expand (show) one "sidebar" at the same time.
But when there is a "header" group with the same name, it will not react on this.

When you want a group for "sidebar" and "header" you need to use the EliseBox_group_ignore_type in each of the "sidebar" and "header" for this.

...
 Header
 =======
 
 <h2 class="EliseBox_header-expand EliseBox_group-1"> Header Test - Click to hide</h2>
 <p> This is the Content to this Header Test.</p>
  
 <h2 class="EliseBox_header-expand EliseBox_group-1"> Header Test - Click to hide</h2>
 <div> This is the Content to this Header Test.</div>

 SideBar
 ========
 
 <div class="EliseBox_sidebar-collapse EliseBox_group-2"> 
  <div style="padding: 5px; border: 1px solid #ccc; background-color: #eee;">
   This is a example Content of the Sidebar, in the collapse state it will show the content only on request.<br>
  </div>
 </div>

 <div class="EliseBox_sidebar-collapse EliseBox_group-2"> 
  <div style="padding: 5px; border: 1px solid #ccc; background-color: #eee;">
   This is a example Content of the Sidebar, in the collapse state it will show the content only on request.<br>
  </div>
 </div>
 ...
      

Keep Group open

Is it possible to force that always one Object in a group need to be open with EliseBox_groupKeepOpen.

Change Image Path for a special "header" or "sidebar"

It could be needed that you want to change the images of on special "header" or "sidebar".
For example when you have a description in the images or other text that should only display to one "header" or "sidebar".

This can simple realized over EliseBox_imgPath-.... For e.g. when your images are in "/gfx/images/elisebox/" and you use EliseBox_imgPath-newMenu the JavaScript will try to load the images from "/gfx/images/elisebox/newMenu/".
You see it is very easy to use several customize "header" or "sidebar" on the same page.

 <div class="EliseBox_sidebar-collapse EliseBox_imgPath-newMenu"> 
  <div style="padding: 5px; border: 1px solid #ccc; background-color: #eee;">
   This is a example Content of the Sidebar, in the collapse state it will show the content only on request.<br>
  </div>
 </div>

 <div class="EliseBox_sidebar-collapse EliseBox_imgPath-oldMenue"> 
  <div style="padding: 5px; border: 1px solid #ccc; background-color: #eee;">
   This is a example Content of the Sidebar, in the collapse state it will show the content only on request.<br>
  </div>
 </div>
      

The default Location for the Images is set to "gfx/", when you need to changes this you can simple to this with an JavaScript Line.
Please keep in mind that you will override the basic path for images with this command so when you used EliseBox_imgPath- make sure that the images available in this directory as well.

<script type="text/javascript" src="/js/byrei-elisebox_0.5.js"></script>
<script type="text/javascript">
 if (ByRei_EliseBox !== "undefined") { 
     ByRei_EliseBox.config.path.img = '/gfx/png/elisebox';
 }
</script>