I like how the accordion only lets one section stay open, but I don’t like how everything jumps around when I change groups.
Is there any way that I could have my various accordion groups stay put, and which ever one I click, then that one section is displayed open at the top with a duplicate header that can be styled differently?
Try to init it the next way:
dhxAccord = new dhtmlXAccordion("accordObj");
dhxAccord.loadJSON({
multi_mode: true,
cells: [
{id: "a1", text: "Main Page", height: "*"},
{id: "a2", text: "Site Navigation", height: "*"},
{id: "c3", text: "Cell 3", height: "*"},
{id: "c4", text: "Cell 4", height: "*"},
{id: "c5", text: "Cell 5", height: "*"}
]
});
Thanks, but that’s not what I am after. That code just lets multiple items be open at once.
I only want on section open at a time and I want whatever is the open section to always be displayed in the same spot, at the top.
In Microsoft Outlook, only one section can be open at a time and that section is always displayed at the top and the title of the open section is always duplicated in a master header.
Ok
Try the next:
dhxAccord = new dhtmlXAccordion("accordObj");
dhxAccord.loadJSON({
multi_mode: true,
cells: [
{id: "a1", text: "Main Page", height: 200},
{id: "a2", text: "Site Navigation", height: "*"},
{id: "c3", text: "Cell 3", height: "*"},
{id: "c4", text: "Cell 4", height: "*"},
{id: "c5", text: "Cell 5", height: "*"}
]
});
dhxAccord.attachEvent("onBeforeActive",function(id,mode){
return !(mode=="close"&&id=="a1")
});
dhxAccord.cells("a1").firstChild.childNodes[2].style.display = "none";
Thanks, but that doesn’t work either. Only difference now is the first group is always open and can’t be closed (this is good actually), but I can still open other groups beneath it.
What I need is a way so that when I click on a group (besides the first one), that I move that selected groups contents upto the first group. I also then need to change the label of that first group to match that of the just clicked on group.
Maybe this should be another control?
Are you need the right order of 3 bottom folders?
If not - here it is:
myLayout = new dhtmlXLayoutObject(document.body, "2U");
myLayout.cells("a").setWidth(250);
myLayout.cells("a").hideHeader();
myAccordion = myLayout.cells("a").attachAccordion("accord");
myAccordion.addItem("a1", "Mail");
myAccordion.addItem("a2", "Calendar");
myAccordion.addItem("a3", "Contacts");
myAccordion.addItem("a4", "Tasks");
myAccordion.openItem("a1");
myAccordion.attachEvent("onActive", function(itemId, state){
myAccordion.cells(itemId).moveOnTop();
});