Need help with change in JS code

JavaScript
1

I have a javascript for a tree view but i need to change it according to the requirement. Lets start with example with the treeview as follow:

1 Door phone
1.1 Ready Kits
1.1.1 Audioset
1.1.2 Videoset
1.2 Audio Kits
1.2.1 Elphone
1.2.2 Video Door phone
2 CCTV
2.1 Camera
2.1.1 Dome Camera
2.1.2 IP Camera
2.2 Others

Now the thing is in the current treeview a single category is open at a time. like if 1.1.1 is open 1.1.2 will b closed and similarly if 1.1 is open…1.2 will b closed. But i want that when i click on 1(Door phone) ie Door phone…evry node should be opened instead of just one similary when i click on 2(CCTV), all its node should be opened.

I hope it will be possible to achieve this and i would be helped. My succeeding post will be the javascript i need help with. Thanks

2

still waiting :slight_smile:

ps…and don’t forget to enclose your code in code tags - use the # button in the editor’s toolbar

3

function jv_vmAccordionMenu(vmAccordionId, spanExpant, spanCollapse, accOptions, accHoverDelay, mouseHover) {
if($(vmAccordionId)){
$(vmAccordionId).accParentItems = ;
for(var i = 0; i < $(vmAccordionId).childNodes.length; i++) {
if($(vmAccordionId).childNodes[i].className.indexOf(‘parent’) >= 0){
$(vmAccordionId).accParentItems.push($(vmAccordionId).childNodes[i]);
}
}
$(vmAccordionId).accTogglers = ;
$(vmAccordionId).accElements = ;
var startItem = -1;
for(var i = 0; i < $(vmAccordionId).accParentItems.length; i++) {
var accToggler = document.createElement(“span”);
$(vmAccordionId).accParentItems[i].insertBefore(accToggler, $(vmAccordionId).accParentItems[i].firstChild);
$(vmAccordionId).accTogglers.push(accToggler);
$(vmAccordionId).accElements.push($(vmAccordionId).accParentItems[i].getElementsByTagName(‘ul’)[0]);

    if ( $(vmAccordionId).accParentItems[i].className.indexOf('active') &gt;= 0 ) {
        startItem = 0;
    }

}
if ( $(vmAccordionId).accParentItems.length > 0 ){
$(vmAccordionId).Accordion = new Accordion($(vmAccordionId).accTogglers, $(vmAccordionId).accElements, $merge({
opacity: false,
alwaysHide: true,
show: startItem,
duration: 400,
transition: Fx.Transitions.Bounce.easeOut,

        onActive: function(toggler, element){
            element.parentNode.parentNode.setStyle('height', 'auto');
            toggler.setAttribute("class","Collapse");
        },
        onBackground: function(toggler, element){
            element.parentNode.parentNode.setStyle('height', 'auto');
            element.setStyle('height', element.offsetHeight+'px');
            toggler.setAttribute("class","Expand");
        }

        }, accOptions)

    );
}
accTimer = null;
if (!accHoverDelay) var accHoverDelay = 200;

for(var i = 0; i &lt; $(vmAccordionId).accParentItems.length; i++) {

    eval("function accOnclickFunc(){" +
    		"return function(){ " +
        		"if( $('"+vmAccordionId+"').accElements["+i+"].style.height == '0px' ) { " +
        				"$('"+vmAccordionId+"').Accordion.display("+i+") " +
        		"}" +
    		"}" +
    	"}");
	eval("function accOnMouseoverFunc(){" +
			"return function(){" +
				"if( $('"+vmAccordionId+"').accElements["+i+"].style.height == '0px' ){" +
					"accTimer = $('"+vmAccordionId+"').Accordion.display.delay("+accHoverDelay+", $('"+vmAccordionId+"').Accordion, "+i+");" +
					"}" +
			"}" +
		"}");
	eval("function accOnmouseoutFunc(){return function(){if($defined(accTimer)){$clear(accTimer);}}}");

    $(vmAccordionId).accParentItems[i].firstChild.nextSibling.onclick = accOnclickFunc();
	if (mouseHover==1) {
		$(vmAccordionId).accParentItems[i].firstChild.nextSibling.onmouseover = accOnMouseoverFunc();
    }
	$(vmAccordionId).accParentItems[i].firstChild.nextSibling.onmouseout = accOnmouseoutFunc();
}

for(var i = 0; i &lt; $(vmAccordionId).accElements.length; i++) {
    $(vmAccordionId).accElements[i].setAttribute('id', vmAccordionId+'_'+i);
    jv_vmAccordionMenu(vmAccordionId+'_'+i, spanExpant, spanCollapse, accOptions, accHoverDelay, mouseHover)
}

}
}

4

You’re using JQuery and the code you posted seems to be making the code much more complicated than it needs to be.

I would do something similar to this using just plain vanilla javascript:

  1. arrange all your tree nodes into divs and put each node inside its parent node in your html.

  2. give all the tree nodes the same class name

  3. when a node is clicked, fire an onclick function that gets all the child nodes with the class name in 2) for the node that was clicked

  4. set the display style for the child nodes in 3) to block

  5. when the node in 3) is clicked again, set the display style for the child nodes in 3) to none.

5

Oh man…Thanks for the reply bt i think i will need ages to understand and implement it. i will give you the live link where i need the change.

http://www.webfactory.in/elcomsecurity/index.php?option=com_virtuemart&page=shop.browse&category_id=11&Itemid=210&Itemid=58

at the above link, there is top menu from where i select Door phones or CCTV and whichever i select tat particular parent should be opened with all its child open. rite now its happening bt just one child remains open