DMXzone Accordion Support Product Page
Answered
Tick does not appear in checkbox used as trigger to open panel?
Asked 27 May 2012 01:23:48
1
has this question
27 May 2012 01:23:48 Mark Lynch posted:
Hi, I have a form on a website, with a closed accordion panel underneath. I have a checkbox in the form, which, when clicked, opens the accordion panel underneath (I used the dmx server behaviour to do this).Everything works fine, except when the checkbox is clicked, the accordion panel opens as it should, but the 'tick' does not appear in the little square checkbox.
Can anyone give a solution or workround for this problem?
Thanks
Mark
Promoted Answers
Replied 12 Jun 2012 08:19:58
Here is a sample of how this can be done with a single custom javascript function:
Now the custom function - lets assume you have two check boxes that look like:
And you like to show the Accordion when whichever is checked and hide it when none is checked.
So here is a function for that ( set in a separate script tag):
The function accepts 3 arguments:
elem - the id of the check-box that has been checked,
accordion - the id of the Accordion element
and
container - the id/class of a wrapper for the checkbox group you like to apply that behaviour on in CSS notation.
So each of your checkobxes must have an id set, and onclick attribute like in this example:
The example markup from above will look like:
If you have any questions regarding this code you can check with me online from 9 to 18 CET on our live chat or mail me at miro AT dynamiczones DOT com.
Now the custom function - lets assume you have two check boxes that look like:
<div id="checkboxes"> <input name="checkbox1" type="checkbox" id="checkbox1" /> <input name="checkbox2" type="checkbox" id="checkbox2" /> </div>
And you like to show the Accordion when whichever is checked and hide it when none is checked.
So here is a function for that ( set in a separate script tag):
<script>
function showPanel(elem,accordion,container){
var hasChecked = false;
$(container + ' input:checkbox').each(function(index, element) {
if($(this).is(':checked') && $(this).attr('id')!= elem){
hasChecked = true;
}
});
if(hasChecked){
return;
}else{
dmxAccordionAction(accordion, 'goToSection', 0);
}
}
</script>The function accepts 3 arguments:
elem - the id of the check-box that has been checked,
accordion - the id of the Accordion element
and
container - the id/class of a wrapper for the checkbox group you like to apply that behaviour on in CSS notation.
So each of your checkobxes must have an id set, and onclick attribute like in this example:
<input name="checkbox2" type="checkbox" id="checkbox2" onclick="showPanel($(this).attr('id'),'dmxAccordion1','#checkboxes')" />
The example markup from above will look like:
<div id="checkboxes">
<input name="checkbox1" type="checkbox" id="checkbox1" onclick="showPanel($(this).attr('id'),'dmxAccordion1','#checkboxes')" />
<input name="checkbox2" type="checkbox" id="checkbox2" onclick="showPanel($(this).attr('id'),'dmxAccordion1','#checkboxes')" />
</div>
If you have any questions regarding this code you can check with me online from 9 to 18 CET on our live chat or mail me at miro AT dynamiczones DOT com.
Replies
Replied 28 May 2012 06:30:26
28 May 2012 06:30:26 Vulcho Vulev replied:
Hello Mark.
Can you provide us with link to the page in order for us to inspect your code.
Regards: Vulcho.
Can you provide us with link to the page in order for us to inspect your code.
Regards: Vulcho.
Replied 29 May 2012 08:08:18
29 May 2012 08:08:18 Vulcho Vulev replied:
Hello Mark.
Can you please put labels for the other two check boxes that you created ?
Regards: Vulcho.
Can you please put labels for the other two check boxes that you created ?
Regards: Vulcho.
Replied 29 May 2012 11:26:23
29 May 2012 11:26:23 Mark Lynch replied:
Hi Vulcho,
Have put labels on the checkboxs, but don't really want these on the final result (visibly to show)
Thanks
Mark
Have put labels on the checkboxs, but don't really want these on the final result (visibly to show)
Thanks
Mark
Replied 30 May 2012 06:30:47
30 May 2012 06:30:47 Teodor Kuduschiev replied:
Hello,
Can you please provide a link to your page?
Can you please provide a link to your page?
Replied 30 May 2012 06:32:52
30 May 2012 06:32:52 Vulcho Vulev replied:
Hello Mark can you please change the following lines of code:
Should become:
<!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>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>5commitments.com</title>
<link href="../../includes/CSSLayouts/CSSLayouts.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="../../includes/CSSLayouts/debug_plus.js"></script>
<link href="../../includes/CSSLayouts/fivecindex2.css" rel="stylesheet" type="text/css" />
<link href="../../includes/CSSLayouts/fivecindex2_user.css" rel="stylesheet" type="text/css" />
<script type="text/javascript">
function MM_preloadImages() { //v3.0
var d=document; if(d.images){ if(!d.MM_p) d.MM_p=new Array();
var i,j=d.MM_p.length,a=MM_preloadImages.arguments; for(i=0; i<a.length; i++)
if (a[i].indexOf("#")!=0){ d.MM_p[j]=new Image; d.MM_p[j++].src=a[i];}}
}
function MM_swapImgRestore() { //v3.0
var i,x,a=document.MM_sr; for(i=0;a&&i<a.length&&(x=a[i])&&x.oSrc;i++) x.src=x.oSrc;
}
function MM_findObj(n, d) { //v4.01
var p,i,x; if(!d) d=document; if((p=n.indexOf("?"))>0&&parent.frames.length) {
d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);}
if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++) x=d.forms[i][n];
for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers[i].document);
if(!x && d.getElementById) x=d.getElementById(n); return x;
}
function MM_swapImage() { //v3.0
var i,j=0,x,a=MM_swapImage.arguments; document.MM_sr=new Array; for(i=0;i<(a.length-2);i+=3)
if ((x=MM_findObj(a[i]))!=null){document.MM_sr[j++]=x; if(!x.oSrc) x.oSrc=x.src; x.src=a[i+2];}
}
function dmxAccordionAction(accordionName, actionName, sectionNumber) { // v1.00
var accordion = document.getElementById(accordionName);
if (accordion) {
var accordionLength = jQuery('#'+accordionName).accordion('length');
switch (actionName) {
case 'disable' : jQuery('#'+accordionName).dmxAccordion('disable');break;
case 'enable' : jQuery('#'+accordionName).dmxAccordion('enable');break;
case 'goToSection' : jQuery('#'+accordionName).dmxAccordion('activate',sectionNumber); break;
}
}
document.MM_returnValue = false;
}
</script>
<link href="../../css/page_styles2.css" rel="stylesheet" type="text/css" />
<link href="../../includes/CSSLayouts/three_ads.css" rel="stylesheet" type="text/css" />
<link href="../../includes/CSSLayouts/three_ads_user.css" rel="stylesheet" type="text/css" />
<link href="../../includes/CSSLayouts/threeads2.css" rel="stylesheet" type="text/css" />
<link href="../../includes/CSSLayouts/threeads2_user.css" rel="stylesheet" type="text/css" />
<link href="../../includes/CSSLayouts/streampanel1.css" rel="stylesheet" type="text/css" />
<link href="../../includes/CSSLayouts/streampanel1_user.css" rel="stylesheet" type="text/css" />
<link href='http://fonts.googleapis.com/css?family=Raleway:100' rel='stylesheet' type='text/css' />
<link href="../../includes/CSSPanels/purewithoutfooter/standard.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="../../includes/CSSPanels/CSSPanels.js"></script>
<link href="../../includes/CSSPanels/CSSPanelpayment.css" rel="stylesheet" type="text/css" />
<link href="../../includes/CSSLayouts/payment_panel1.css" rel="stylesheet" type="text/css" />
<link href="../../includes/CSSLayouts/payment_panel1_user.css" rel="stylesheet" type="text/css" />
<link rel="stylesheet" type="text/css" href="../../Styles/dmxAccordion.css" />
<link rel="stylesheet" type="text/css" href="../../Styles/jqueryui/blitzer/blitzer.css" />
<script type="text/javascript" src="../../ScriptLibrary/jquery-latest.pack.js"></script>
<script type="text/javascript" src="../../ScriptLibrary/jquery-ui-core.min.js"></script>
<script type="text/javascript" src="../../ScriptLibrary/jquery-ui-effects.min.js"></script>
<script type="text/javascript" src="../../ScriptLibrary/dmxAccordion.js"></script>
<style type="text/css">
.Serenepaybutt {
padding-top: 7px;
padding-right: 20px;
padding-bottom: 7px;
padding-left: 20px;
text-transform: uppercase;
color: #ffffff;
background-color: #5d5c5c;
font-family: Trebuchet MS, Helvetica, sans-serif;
font-size: 21px;
-moz-border-radius: 7px;
-webkit-border-radius: 7px;
-khtml-border-radius: 7px;
border-radius: 7px;
behavior: url(../../webassist/button_styles/ie-css3.htc);
background-image: -moz-linear-gradient(top, #009900, #006600);
background-image: -o-linear-gradient(top, #009900, #006600);
background-image: -webkit-linear-gradient(#009900, #006600);
background-image: -webkit-gradient(linear,left top, left bottom, color-stop(0, #009900), color-stop(1, #006600));
background-image: linear-gradient(top, #009900, #006600);
filter: progid:DXImageTransform.Microsoft.Gradient(StartColorStr='#009900', EndColorStr='#006600', GradientType=0);
-ms-filter: progid:DXImageTransform.Microsoft.Gradient(StartColorStr='#009900', EndColorStr='#006600', GradientType=0);
border: 1px none #000000;
font-weight: normal;
}
.Serenepaybutt:hover {
color: #CCCCCC;
background-color: #666666;
border-bottom-color: #003300;
border-right-color: #003300;
background-image: -moz-linear-gradient(top, #006600, #009900);
background-image: -o-linear-gradient(top, #006600, #009900);
background-image: -webkit-linear-gradient(#006600, #009900);
background-image: -webkit-gradient(linear,left top, left bottom, color-stop(0, #006600), color-stop(1, #009900));
background-image: linear-gradient(top, #006600, #009900);
filter: progid:DXImageTransform.Microsoft.Gradient(StartColorStr='#006600', EndColorStr='#009900', GradientType=0);
-ms-filter: progid:DXImageTransform.Microsoft.Gradient(StartColorStr='#006600', EndColorStr='#009900', GradientType=0);
}
.Serenebut1 {
padding-top: 7px;
padding-right: 20px;
padding-bottom: 7px;
padding-left: 20px;
text-transform: uppercase;
border-style: solid;
color: #ebebeb;
background-color: #5d5c5c;
font-family: "Trebuchet MS", Helvetica, sans-serif;
font-size: 18px;
border-width: 1px;
-moz-border-radius: 7px;
-webkit-border-radius: 7px;
-khtml-border-radius: 7px;
border-radius: 7px;
behavior: url(../../webassist/button_styles/ie-css3.htc);
font-weight: normal;
background-image: -moz-linear-gradient(top, #999999, #000000);
background-image: -o-linear-gradient(top, #999999, #000000);
background-image: -webkit-linear-gradient(#999999, #000000);
background-image: -webkit-gradient(linear,left top, left bottom, color-stop(0, #999999), color-stop(1, #000000));
background-image: linear-gradient(top, #999999, #000000);
filter: progid:DXImageTransform.Microsoft.Gradient(StartColorStr='#999999', EndColorStr='#000000', GradientType=0);
-ms-filter: progid:DXImageTransform.Microsoft.Gradient(StartColorStr='#999999', EndColorStr='#000000', GradientType=0);
border-top-style: solid;
border-right-style: solid;
border-bottom-style: solid;
border-left-style: solid;
border-color: #999999;
}
.Serenebut1:hover {
color: #CCCCCC;
background-color: #666666;
border-bottom-color: #000000;
border-right-color: #000000;
background-image: -moz-linear-gradient(top, #000000, #999999);
background-image: -o-linear-gradient(top, #000000, #999999);
background-image: -webkit-linear-gradient(#000000, #999999);
background-image: -webkit-gradient(linear,left top, left bottom, color-stop(0, #000000), color-stop(1, #999999));
background-image: linear-gradient(top, #000000, #999999);
filter: progid:DXImageTransform.Microsoft.Gradient(StartColorStr='#000000', EndColorStr='#999999', GradientType=0);
-ms-filter: progid:DXImageTransform.Microsoft.Gradient(StartColorStr='#000000', EndColorStr='#999999', GradientType=0);
}
</style>
</head>
Should become:
<!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>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>5commitments.com</title>
<script type="text/javascript" src="../../ScriptLibrary/jquery-latest.pack.js"></script>
<link href="../../includes/CSSLayouts/CSSLayouts.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="../../includes/CSSLayouts/debug_plus.js"></script>
<link href="../../includes/CSSLayouts/fivecindex2.css" rel="stylesheet" type="text/css" />
<link href="../../includes/CSSLayouts/fivecindex2_user.css" rel="stylesheet" type="text/css" />
<script type="text/javascript">
function MM_preloadImages() { //v3.0
var d=document; if(d.images){ if(!d.MM_p) d.MM_p=new Array();
var i,j=d.MM_p.length,a=MM_preloadImages.arguments; for(i=0; i<a.length; i++)
if (a[i].indexOf("#")!=0){ d.MM_p[j]=new Image; d.MM_p[j++].src=a[i];}}
}
function MM_swapImgRestore() { //v3.0
var i,x,a=document.MM_sr; for(i=0;a&&i<a.length&&(x=a[i])&&x.oSrc;i++) x.src=x.oSrc;
}
function MM_findObj(n, d) { //v4.01
var p,i,x; if(!d) d=document; if((p=n.indexOf("?"))>0&&parent.frames.length) {
d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);}
if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++) x=d.forms[i][n];
for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers[i].document);
if(!x && d.getElementById) x=d.getElementById(n); return x;
}
function MM_swapImage() { //v3.0
var i,j=0,x,a=MM_swapImage.arguments; document.MM_sr=new Array; for(i=0;i<(a.length-2);i+=3)
if ((x=MM_findObj(a[i]))!=null){document.MM_sr[j++]=x; if(!x.oSrc) x.oSrc=x.src; x.src=a[i+2];}
}
function dmxAccordionAction(accordionName, actionName, sectionNumber) { // v1.00
var accordion = document.getElementById(accordionName);
if (accordion) {
var accordionLength = jQuery('#'+accordionName).accordion('length');
switch (actionName) {
case 'disable' : jQuery('#'+accordionName).dmxAccordion('disable');break;
case 'enable' : jQuery('#'+accordionName).dmxAccordion('enable');break;
case 'goToSection' : jQuery('#'+accordionName).dmxAccordion('activate',sectionNumber); break;
}
}
document.MM_returnValue = false;
}
</script>
<link href="../../css/page_styles2.css" rel="stylesheet" type="text/css" />
<link href="../../includes/CSSLayouts/three_ads.css" rel="stylesheet" type="text/css" />
<link href="../../includes/CSSLayouts/three_ads_user.css" rel="stylesheet" type="text/css" />
<link href="../../includes/CSSLayouts/threeads2.css" rel="stylesheet" type="text/css" />
<link href="../../includes/CSSLayouts/threeads2_user.css" rel="stylesheet" type="text/css" />
<link href="../../includes/CSSLayouts/streampanel1.css" rel="stylesheet" type="text/css" />
<link href="../../includes/CSSLayouts/streampanel1_user.css" rel="stylesheet" type="text/css" />
<link href='http://fonts.googleapis.com/css?family=Raleway:100' rel='stylesheet' type='text/css' />
<link href="../../includes/CSSPanels/purewithoutfooter/standard.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="../../includes/CSSPanels/CSSPanels.js"></script>
<link href="../../includes/CSSPanels/CSSPanelpayment.css" rel="stylesheet" type="text/css" />
<link href="../../includes/CSSLayouts/payment_panel1.css" rel="stylesheet" type="text/css" />
<link href="../../includes/CSSLayouts/payment_panel1_user.css" rel="stylesheet" type="text/css" />
<link rel="stylesheet" type="text/css" href="../../Styles/dmxAccordion.css" />
<link rel="stylesheet" type="text/css" href="../../Styles/jqueryui/blitzer/blitzer.css" />
<script type="text/javascript" src="../../ScriptLibrary/jquery-ui-core.min.js"></script>
<script type="text/javascript" src="../../ScriptLibrary/jquery-ui-effects.min.js"></script>
<script type="text/javascript" src="../../ScriptLibrary/dmxAccordion.js"></script>
<style type="text/css">
.Serenepaybutt {
padding-top: 7px;
padding-right: 20px;
padding-bottom: 7px;
padding-left: 20px;
text-transform: uppercase;
color: #ffffff;
background-color: #5d5c5c;
font-family: Trebuchet MS, Helvetica, sans-serif;
font-size: 21px;
-moz-border-radius: 7px;
-webkit-border-radius: 7px;
-khtml-border-radius: 7px;
border-radius: 7px;
behavior: url(../../webassist/button_styles/ie-css3.htc);
background-image: -moz-linear-gradient(top, #009900, #006600);
background-image: -o-linear-gradient(top, #009900, #006600);
background-image: -webkit-linear-gradient(#009900, #006600);
background-image: -webkit-gradient(linear,left top, left bottom, color-stop(0, #009900), color-stop(1, #006600));
background-image: linear-gradient(top, #009900, #006600);
filter: progid:DXImageTransform.Microsoft.Gradient(StartColorStr='#009900', EndColorStr='#006600', GradientType=0);
-ms-filter: progid:DXImageTransform.Microsoft.Gradient(StartColorStr='#009900', EndColorStr='#006600', GradientType=0);
border: 1px none #000000;
font-weight: normal;
}
.Serenepaybutt:hover {
color: #CCCCCC;
background-color: #666666;
border-bottom-color: #003300;
border-right-color: #003300;
background-image: -moz-linear-gradient(top, #006600, #009900);
background-image: -o-linear-gradient(top, #006600, #009900);
background-image: -webkit-linear-gradient(#006600, #009900);
background-image: -webkit-gradient(linear,left top, left bottom, color-stop(0, #006600), color-stop(1, #009900));
background-image: linear-gradient(top, #006600, #009900);
filter: progid:DXImageTransform.Microsoft.Gradient(StartColorStr='#006600', EndColorStr='#009900', GradientType=0);
-ms-filter: progid:DXImageTransform.Microsoft.Gradient(StartColorStr='#006600', EndColorStr='#009900', GradientType=0);
}
.Serenebut1 {
padding-top: 7px;
padding-right: 20px;
padding-bottom: 7px;
padding-left: 20px;
text-transform: uppercase;
border-style: solid;
color: #ebebeb;
background-color: #5d5c5c;
font-family: "Trebuchet MS", Helvetica, sans-serif;
font-size: 18px;
border-width: 1px;
-moz-border-radius: 7px;
-webkit-border-radius: 7px;
-khtml-border-radius: 7px;
border-radius: 7px;
behavior: url(../../webassist/button_styles/ie-css3.htc);
font-weight: normal;
background-image: -moz-linear-gradient(top, #999999, #000000);
background-image: -o-linear-gradient(top, #999999, #000000);
background-image: -webkit-linear-gradient(#999999, #000000);
background-image: -webkit-gradient(linear,left top, left bottom, color-stop(0, #999999), color-stop(1, #000000));
background-image: linear-gradient(top, #999999, #000000);
filter: progid:DXImageTransform.Microsoft.Gradient(StartColorStr='#999999', EndColorStr='#000000', GradientType=0);
-ms-filter: progid:DXImageTransform.Microsoft.Gradient(StartColorStr='#999999', EndColorStr='#000000', GradientType=0);
border-top-style: solid;
border-right-style: solid;
border-bottom-style: solid;
border-left-style: solid;
border-color: #999999;
}
.Serenebut1:hover {
color: #CCCCCC;
background-color: #666666;
border-bottom-color: #000000;
border-right-color: #000000;
background-image: -moz-linear-gradient(top, #000000, #999999);
background-image: -o-linear-gradient(top, #000000, #999999);
background-image: -webkit-linear-gradient(#000000, #999999);
background-image: -webkit-gradient(linear,left top, left bottom, color-stop(0, #000000), color-stop(1, #999999));
background-image: linear-gradient(top, #000000, #999999);
filter: progid:DXImageTransform.Microsoft.Gradient(StartColorStr='#000000', EndColorStr='#999999', GradientType=0);
-ms-filter: progid:DXImageTransform.Microsoft.Gradient(StartColorStr='#000000', EndColorStr='#999999', GradientType=0);
}
</style>
</head>
Replied 30 May 2012 06:41:56
30 May 2012 06:41:56 Mark Lynch replied:
Hi Vulcho,
Unfortunately, this did not work? - any thoughts?
I appreciate your help on this, thanks
Mark
Unfortunately, this did not work? - any thoughts?
I appreciate your help on this, thanks
Mark
Replied 30 May 2012 07:26:34
30 May 2012 07:26:34 Teodor Kuduschiev replied:
Hello Mark,
I just checked your page, unfortunately the onClick Dreamweaver Behavior is not suitable for checkboxes as it is not a toggle behavior and the checkboxes have 2 states: checked/unchecked.
I just checked your page, unfortunately the onClick Dreamweaver Behavior is not suitable for checkboxes as it is not a toggle behavior and the checkboxes have 2 states: checked/unchecked.
Replied 30 May 2012 07:33:56
30 May 2012 07:33:56 Mark Lynch replied:
Hi, in that case, do you think it's possible that two graphic images could be used instead of a checkbox, as a rollover?
So that the graphic image (say checkbox.gif) is shown, and when someone presses the rollover the down state shows the tick checkbox (tick_checkbox.gif) ?
What do you think. If you think yes, could I impose and say, do you have a link where I could show a rollover like this?
Many thanks
Mark
So that the graphic image (say checkbox.gif) is shown, and when someone presses the rollover the down state shows the tick checkbox (tick_checkbox.gif) ?
What do you think. If you think yes, could I impose and say, do you have a link where I could show a rollover like this?
Many thanks
Mark
Replied 02 Jun 2012 08:03:34
02 Jun 2012 08:03:34 Mark Lynch replied:
Hi, any thoughts on this?
Thanks
Mark
Thanks
Mark
Replied 12 Jun 2012 08:19:58
12 Jun 2012 08:19:58 Miroslav Zografski replied:
Here is a sample of how this can be done with a single custom javascript function:
Now the custom function - lets assume you have two check boxes that look like:
And you like to show the Accordion when whichever is checked and hide it when none is checked.
So here is a function for that ( set in a separate script tag):
The function accepts 3 arguments:
elem - the id of the check-box that has been checked,
accordion - the id of the Accordion element
and
container - the id/class of a wrapper for the checkbox group you like to apply that behaviour on in CSS notation.
So each of your checkobxes must have an id set, and onclick attribute like in this example:
The example markup from above will look like:
If you have any questions regarding this code you can check with me online from 9 to 18 CET on our live chat or mail me at miro AT dynamiczones DOT com.
Now the custom function - lets assume you have two check boxes that look like:
<div id="checkboxes"> <input name="checkbox1" type="checkbox" id="checkbox1" /> <input name="checkbox2" type="checkbox" id="checkbox2" /> </div>
And you like to show the Accordion when whichever is checked and hide it when none is checked.
So here is a function for that ( set in a separate script tag):
<script>
function showPanel(elem,accordion,container){
var hasChecked = false;
$(container + ' input:checkbox').each(function(index, element) {
if($(this).is(':checked') && $(this).attr('id')!= elem){
hasChecked = true;
}
});
if(hasChecked){
return;
}else{
dmxAccordionAction(accordion, 'goToSection', 0);
}
}
</script>The function accepts 3 arguments:
elem - the id of the check-box that has been checked,
accordion - the id of the Accordion element
and
container - the id/class of a wrapper for the checkbox group you like to apply that behaviour on in CSS notation.
So each of your checkobxes must have an id set, and onclick attribute like in this example:
<input name="checkbox2" type="checkbox" id="checkbox2" onclick="showPanel($(this).attr('id'),'dmxAccordion1','#checkboxes')" />
The example markup from above will look like:
<div id="checkboxes">
<input name="checkbox1" type="checkbox" id="checkbox1" onclick="showPanel($(this).attr('id'),'dmxAccordion1','#checkboxes')" />
<input name="checkbox2" type="checkbox" id="checkbox2" onclick="showPanel($(this).attr('id'),'dmxAccordion1','#checkboxes')" />
</div>
If you have any questions regarding this code you can check with me online from 9 to 18 CET on our live chat or mail me at miro AT dynamiczones DOT com.