This method creates a new Accordion widget.
Object. The reference to the Widget element. This argument is required.
Object Literal. The Object Literal containing the additional options. This argument is optional.
Accordion widget in a web page.<div id="AccordionWidget1" class="AccordionWidget">
<p id="FoldID" class="FoldHeader">Fold #1</p>
<div class="FoldContentWrapper">
<!--// INSERT CONTENT HERE -->
<div id="ContentWrapperID"></div>
</div>
<p id="FoldID" class="FoldHeader">Fold #2</p>
<div class="FoldContentWrapper">
<!--// INSERT CONTENT HERE -->
<div>
<p>text text text.</p>
</div>
</div>
</div>
Array object. This file is loaded automatically(if it wasn't already loaded by another widget)
when this widget is included in a web page.Boolean. Whether cookies should be used to store the last visited fold.
String. The name of the cookie. This argument is required if the useCookie was set to true.
Number. The duration, in days, before cookie expires. This argument is required if useCookie was set to true.
Array Literal. An Array Literal containing the additional options(listed below) to set for each fold.
String. The ID of the fold. This argument is required.
String. The ID of the element used to display the AJAX response. This argument is required.
Boolean. Whether the state of the content received via an ajax request should be maintained or not. If set to true, this prevents the repetitive requests. This argument is required.
Function. The callback method to execute when the selected fold is clicked. Use this method when you want to override the default click event. It can be called with two arguments: fold which is a direct reference to the selected fold and index which is the position in the folds array that the selected fold has.
// Set up an Accordion Widget without using any additional options:
JUNE.Widget.Accordion(JUNE.Dom.find('WidgetID'));
// Set up an Accordion Widget using all additional options:
//*** Manage the Click Event on the first fold
var Fold1_Selected = function(item, index)
{
};
//*** Manage the Click Event on the second fold
var Fold2_Selected = function(item, index)
{
};
var Folds = [
{ 'name': 'Fold1', 'callback': Fold1_Selected, 'saveState': true, 'dataField': 'ContentWrapper1' },
{ 'name': 'Fold2', 'callback': Fold2_Selected, 'saveState': false, 'dataField': 'ContentWrapper2' }
];
// ACCORDION WIDGET WITH FULL OPTIONS
JUNE.Widget.Accordion(
JUNE.Dom.find("AccordionWidget1"),
{"useCookie": true, "name": 'AccordionWidget_1', "duration": 1, 'folds': Folds});
Create an Accordion Widget:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<link href="res/JuneWidget_Accordion.css" rel="stylesheet" type="text/css" />
<link title="no_js" href="res/JuneWidget_Accordion_nojs.css" rel="stylesheet" type="text/css" />
<style type="text/css">
/* Additional styling */
DIV.AccordionWidget { width: 400px; height: auto; float: left; margin: 25px; border: solid 1px #ccc; }
DIV.FoldContentWrapper DIV { margin: 0 0; padding: 0 0;}
DIV.FoldContentWrapper P {
text-align: left;
vertical-align: top;
margin: 5px 5px 5px 5px;
padding: 0 0 0 0;
font-family: Verdana, Tahoma, Sans-Serif;
font-size: 9pt;
color: #000000;
line-height: 1.3em;
}
</style>
<script src="June_2_0.js" type="text/javascript"></script>
<script type="text/javascript">
// Disable the no_js stylesheet as soon as possible:
JUNE.Util.disableStyleSheets("no_js");
</script>
<script src="JuneWidget_Accordion.js" type="text/javascript"></script>
<script type="text/javascript">
var Widget =
{
init : function ()
{
// ACCORDION WIDGET WITHOUT OPTIONS
JUNE.Widget.Accordion(JUNE.Dom.find("AccordionWidget2"));
}
};
JUNE.start(Widget);
</script>
</head>
<body>
<!--// ACCORDION WIDGET 2 -->
<div id="AccordionWidget2" class="AccordionWidget">
<p id="Fold1_1" class="FoldHeader">Accordion #2</p>
<div class="FoldContentWrapper">
<!--// INSERT CONTENT HERE -->
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod.</p>
</div>
<p id="Fold2_2" class="FoldHeader">Fold #2</p>
<div class="FoldContentWrapper">
<!--// INSERT CONTENT HERE -->
<p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium</p>
</div>
<p id="Fold3_3" class="FoldHeader">Fold #3</p>
<div class="FoldContentWrapper">
<!--// INSERT CONTENT HERE -->
<div>
<p>At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis.</p>
</div>
</div>
<p id="Fold4_4" class="FoldHeader">Fold #4</p>
<div class="FoldContentWrapper">
<!--// INSERT CONTENT HERE -->
<div>
<p>At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis.</p>
</div>
</div>
</div>
</body>
</html>
Create an enhanced Accordion Widget:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<script type="text/javascript">
var loader_image = document.createElement('img');
loader_image.setAttribute('src', 'res/ajax_loader.gif');
loader_image.setAttribute('alt', 'Loading...');
loader_image.setAttribute('title', 'Loading...');
loader_image.setAttribute('style', 'margin: 15px 15px; display: block;');
</script>
<link href="res/JuneWidget_Accordion.css" rel="stylesheet" type="text/css" />
<link title="no_js" href="res/JuneWidget_Accordion_nojs.css" rel="stylesheet" type="text/css" />
<style type="text/css">
/* Additional styling */
DIV.AccordionWidget { width: 400px; height: auto; float: left; margin: 25px; border: solid 1px #ccc; }
DIV.FoldContentWrapper DIV { margin: 0 0; padding: 0 0;}
DIV.FoldContentWrapper P {
text-align: left;
vertical-align: top;
margin: 5px 5px 5px 5px;
padding: 0 0 0 0;
font-family: Verdana, Tahoma, Sans-Serif;
font-size: 9pt;
color: #000000;
line-height: 1.3em;
}
</style>
<script src="June_2_0.js" type="text/javascript"></script>
<script type="text/javascript">
// Disable the no_js stylesheet as soon as possible:
JUNE.Util.disableStyleSheets("no_js");
</script>
<script src="JuneWeb_2_0.js" type="text/javascript"></script>
<script src="JuneWidget_Accordion.js" type="text/javascript"></script>
<script type="text/javascript">
var Widget =
{
init : function ()
{
var showLoader = function (wrapper) { return wrapper.appendChild(loader_image); };
//*** Manage the Click Event on the first fold
var Fold1_Selected = function(item, index)
{
var wrapper = JUNE.Dom.getNextSibling(item);
// empty wrapper's content
wrapper.innerHTML = '';
showLoader(wrapper);
var page = 'res/fold1.txt';
var onComplete = function(req) {
return wrapper.innerHTML = req.responseText;
};
JUNE.Web.getData(page, onComplete);
};
//*** Manage the Click Event on the second fold
var Fold2_Selected = function(item, index)
{
var wrapper = JUNE.Dom.getNextSibling(item);
// empty wrapper's content
wrapper.innerHTML = '';
showLoader(wrapper);
var page = 'res/fold2.txt';
var onComplete = function(req) {
return wrapper.innerHTML = req.responseText;
};
JUNE.Web.getData(page, onComplete);
};
var Folds = [
{ 'name': 'Fold1', 'callback': Fold1_Selected, 'saveState': true, 'dataField': 'ContentWrapper1' },
{ 'name': 'Fold2', 'callback': Fold2_Selected, 'saveState': false, 'dataField': 'ContentWrapper2' }
];
// ACCORDION WIDGET WITH FULL OPTIONS
JUNE.Widget.Accordion(
JUNE.Dom.find("AccordionWidget1"),
{"useCookie": true, "name": 'AccordionWidget_1', "duration": 1, 'folds': Folds});
}
};
JUNE.start(Widget);
</script>
</head>
<body>
<!--// ACCORDION WIDGET 1 -->
<div id="AccordionWidget1" class="AccordionWidget">
<p id="Fold1" class="FoldHeader">Fold #1</p>
<div class="FoldContentWrapper">
<!--// AJAX ENABLED FOLD -->
<div id="ContentWrapper1"></div>
</div>
<p id="Fold2" class="FoldHeader">Fold #2</p>
<div class="FoldContentWrapper">
<!--// AJAX ENABLED FOLD -->
<div id="ContentWrapper2"></div>
</div>
<p id="Fold3" class="FoldHeader">Fold #3</p>
<div class="FoldContentWrapper">
<!--// INSERT CONTENT HERE -->
<div>
<p>At vero eos et accusamus et iusto odio dignissimos.</p>
</div>
</div>
<p id="Fold4" class="FoldHeader">Fold #4</p>
<div class="FoldContentWrapper">
<!--// INSERT CONTENT HERE -->
<div>
<p>At vero eos et accusamus et iusto odio dignissimos.</p>
</div>
</div>
</div>
</body>
</html>
Show me
» Example