Items Settings Manipulations
Adding Item
A new item can be added to dhtmlxAccordion in the following way:
<script> var item = dhxAccord.addItem(itemId, itemText); </script>
The parameters of this method are:
- itemId - id of the added item;
- itemText - title text of the added item.
It should be noted that a new item added to the accordion is always placed under already existing ones. The newly added item is always created expanded (collapsing the item that was expanded previously).
Let's add a new item with id “a1”, and title text “a” to the Accordion:
<script> dhxAccord.addItem("a1", "a"); </script>
Item's Accessing
The following way of items accessing is used for working with dhtmlxAccordion: through Accordion items' ids. All the items in the Accordion have ids that are listed in alphabetical succession starting with “a”. Items are referred to as cells. Thus, we can access any Accordion's item in the following way:
<script> var item = dhxAccord.cells(itemId); </script>
The method will return item's object. So, if the user wants to access the “a” item, the following code string should be written:
<script> var item = dhxAccord.cells("a"); </script>
Setting/Getting Item's Text
The header text of an Accordion item can be set/changed in this way:
<script> dhxAccord.cells(itemId).setText(text); </script>
setText() method takes one parameter:
- text - header text of the added item.
Item's header text can be easily got through method getText():
<script> var text = dhxAccord.cells(itemId).setText(); // returns current item's header text </script>
Iterator
Method forEachItem() calls user-defined function for every existing item passing item's object into it. Using iterator can be very useful, in case the user wants all the items to be subjects of the same change.
<script> dhxAccord.forEachItem(function(item){ // code here }); // or function doWithItem(item){ // code here }); dhxAccord.forEachItem(doWithItem); </script>
For example, the user can use setText() method to set the same text for headers of all items in the Accordion:
<script> dhxAccord.forEachItem(function(item){ // actions, for example: item.setText("newText"); }); </script>
Setting/Removing Item's Icon
An icon can be set to any of Accordion items in the following way:
<script> dhxAccord.cells(itemId).setIcon(icon); </script>
The user should use the following method if he wants to remove any item's icon:
<script> dhxAccord.cells(itemId).clearIcon(); </script>
Opening/Closing Items
Only one item can be held open (expanded) at a time in dhtmlxAccordion. The current active item becomes inactive/closed, when some another item is set active from the page, or from script with the help of the following method:
<script> dhxAccord.cells(itemId).open(); </script>
The method close() should be used to close (collapse) an Accordion's item:
<script> dhxAccord.cells(itemId).close(); </script>
Window's Docking/Item's Undocking
Any item in dhtmlxAccordion can be easily Undocked - extracted from the accordion in order to be displayed separately (in a window). The user should use the following method to undock an item:
<script> dhxAccord.cells(itemId).undock(); </script>
An undocked item can be Docked - made a part of the accordion again - in the following way:
<script> dhxAccord.cells(itemId).dock(); </script>
Showing/Hiding Items
Any item in dhtmlxAccordion can be easily shown/hidden by means of these two methods:
<script> dhxAccord.cells(itemId).show(); dhxAccord.cells(itemId).hide(); </script>
Attaching Objects to Items
There is the possibility to add an object to any “objectless” accordion's item. To do this, the user should first create this object on page, and then write one line of code to attach this object to an item of the accordion.
For example, we create a <div> element with id “objId” and with some text inside it.
<body> <div id="objId"> Some text </div> </body>
Then we just use the following line of code to attach this object we've just created to an Accordion item:
<script> dhxAccord.cells("a1").attachObject("objId"); </script>
Note: See here for information on attaching other dhtmlx components to dhtmlxAccordion.
Object Size Handling
By default, the items have overflow:hidden style.
In case the item is not able to display the whole object, the following style should be specified for the object:
<div id="objId" style="width:100%;height:100%;overflow:auto;...>
Now the item will display the scroll bar in case the object does not fit item's size.
Attaching URLs to Items
Sometimes the user needs to display a web page in an Accordion's item. attachURL() method is used for this purpose in the following way:
<script> dhxAccord.cells(itemId).attachURL(url); </script>
Accessing Inner Content
Any object on the external page attached with attachURL() method can be accessed like this:
- Page inner.html
...
<div id = "A">...</div>
<script>
function myFunc() {
...
}
</script>
...- Page index.html
<script> var dhxAccord = new dhtmlXAccordion(...); ... dhxAccord.addItem("a1", "item_text"); ... dhxAccord.cells("a1").attachURL("inner.html"); // accessing <div id="A"> if (_isIE) { dhxAccord.cells("a1").win._frame.contentWindow.document.getElementById("A")... } else { dhxAccord.cells("a1").win._frame.contentDocument.getElementById("A")... } // calling function from inner.html dhxAccord.cells("a1").win._frame.contentWindow.myFunc(); </script>
Item Accessing from Attached URL
If the user needs to do some action with an item of the Accordion from the attached URL (for example, to close it by clicking some button on page), he should write the following code lines in the attached external page:
<input type="button" value="hide item" onclick="hideItem();"> // create a button <script> function hideItem() { parent.dhxAccord.cells(itemId).hide(); // hide item in question } </script>
It should be noted that variable dhxAccord should be created as a global one (in our main dhtmlxAccordion script) in order to be seen by the script in the attached external page.