So far these have been FANTASTIC to work with.
I have two questions.
1) As you can see in the code I currently have 11 panelBars. Each panel bar is located in its own tab. When I click on a section it expands and collapses as expected. But, now I wanted to add in a Toggle to Collapse/Expand all the sections in the current panel.
So the ID of the element I click to do this is id="1-panel" etc. I can then parse it to figure out which panel I am dealing with.
After that I get lost. I looked at the example in the download and just can't seem to make it work. I stepped through the code and there were no errors.
Can you help point me to what I am doing wrong?
2) As I stated I am working on a dynamic project. I have a php file where I define my tabs, sections, and controls. I can build out the system with this one file. But, the issue I am struggling with is how to dynamically add the script. I cannot just add it to the html page generated. WP doesn't like that. Is it possible to simple call a Jquery function that will initiate the new panel without having to go in and actually add the panel code?
Thanks a million for your help!
I have two questions.
1) As you can see in the code I currently have 11 panelBars. Each panel bar is located in its own tab. When I click on a section it expands and collapses as expected. But, now I wanted to add in a Toggle to Collapse/Expand all the sections in the current panel.
So the ID of the element I click to do this is id="1-panel" etc. I can then parse it to figure out which panel I am dealing with.
After that I get lost. I looked at the example in the download and just can't seem to make it work. I stepped through the code and there were no errors.
Can you help point me to what I am doing wrong?
2) As I stated I am working on a dynamic project. I have a php file where I define my tabs, sections, and controls. I can build out the system with this one file. But, the issue I am struggling with is how to dynamically add the script. I cannot just add it to the html page generated. WP doesn't like that. Is it possible to simple call a Jquery function that will initiate the new panel without having to go in and actually add the panel code?
Thanks a million for your help!
/* Initialize panel bars */
$(
"#panelbar1"
).kendoPanelBar().data(
"kendoPanelBar"
);
$(
"#panelbar2"
).kendoPanelBar().data(
"kendoPanelBar"
);
$(
"#panelbar3"
).kendoPanelBar().data(
"kendoPanelBar"
);
$(
"#panelbar4"
).kendoPanelBar().data(
"kendoPanelBar"
);
$(
"#panelbar5"
).kendoPanelBar().data(
"kendoPanelBar"
);
$(
"#panelbar6"
).kendoPanelBar().data(
"kendoPanelBar"
);
$(
"#panelbar7"
).kendoPanelBar().data(
"kendoPanelBar"
);
$(
"#panelbar8"
).kendoPanelBar().data(
"kendoPanelBar"
);
$(
"#panelbar9"
).kendoPanelBar().data(
"kendoPanelBar"
);
$(
"#panelbar10"
).kendoPanelBar().data(
"kendoPanelBar"
);
$(
"#panelbar11"
).kendoPanelBar().data(
"kendoPanelBar"
);
/* expand/collapse panel */
$(
".triggerItem"
).click(
function
(e) {
var
target =
this
;
var
panelbar =
'#'
+ target.element.context.id;
var
item = $( panelbar ).select();
if
(item.hasClass(
"k-state-active"
)) {
$( panelBar ).collapse(item);
}
else
{
$( panelBar ).expand(item);
}
});
// Collapse all the sections in the panel
$(
'.p-collapse'
).click(
function
(e) {
var
elementId =
this
.id;
var
target =
'#panelbar'
+ elementId.substring(0, elementId.length - 6) ;
var
panelBar = $( target ), clone = $( target ).clone(
true
);
panelBar.data(
"kendoPanelBar"
).collapse( target +
' k-link'
);
panelBar.replaceWith( clone );
$(target).kendoPanelBar();
});