Expanded navigation by default - php

Question

I use the Sidebar Navigation Menu Professional for Magento by CODNITIVE and I am trying to make it expanded by default. Particularly I need a solution to make just the first list item expanded by default. I try to edit Navigation.php in app/code/community/codnitive/sidenav/block/:
$collapsibleClass = '';
if ($config->isCollapsible()) {
$collapsibleClass = ' collapsible';
}
// add collapsible arrow and wrraper
$arrow = '';
$extraStyle = '';
$collapsibleIconPosition = $config->getCollapsibleIconPosition();
if ($config->isCollapsible()) {
$width = $config->getCollapsibleIconType() === 'arrow' ? 8 : 16;
$height = 0;
$expanded = 0;
if ($hasActiveChildren) {
$width = $config->getCollapsibleIconType() === 'arrow' ? 8 : 16;
$height = 16;
}
if ($height == 0) {
$extraStyle = ' display:none;';
}
if ($height == 0 && $collapsibleIconPosition === 'left') {
$liMarginLeft += $width;
}
if ($this->isCategoryActive($category)) {
$expanded = 1;
}
$expanded = ' expanded="' . $expanded .'"';
$spanOnclick = 'onclick="Codnitive.expandMenu(this.parentNode)';
$spanClass = $config->getCollapsibleIconType() . '-' . $collapsibleIconPosition;
$arrow = '<span class="' . $spanClass . ' " ' . $spanOnclick . '" style="width: ' . $width . 'px; height: ' . $height . 'px;' . $extraStyle . '"></span>';
}
If I add this code to make the desired category expanded
if ($category->getId() == '35') {
$expanded = 1;
}
there appear two problems:
The category remains expanded even if another category is active.
The "plus" sign (showing that the category can be expanded) remains but it should be "minus". I guess $collapsibleIconPosition should be 'right'?
if ($height == 0 && $collapsibleIconPosition === 'left') {
$liMarginLeft += $width;
}

Answer 1

Try this, though i'm not sure which parent it's setting to block. I assume it's the first <li> tag above the a tag since the span tag isn't a parent
$( document ).ready(function() {
$('.nav-1').css( "display", "block" );
});
See if this is how you want it http://jsfiddle.net/6VSUm/

Answer 2

You want to execute that javascript anytime after (enough of) your HTML has loaded.
If your site uses jQuery, you can put it in a ready callback:
$(function(){
Codnitive.expand(document.getElementById('the-menu-parent-element-id'))
})
You can put it at the very end of your html document, or at least after all the navigation HTML code.
...
<script type="text/javascript" language="javascript">
Codnitive.expand(document.getElementById('the-menu-parent-element-id'))
</script>
</body>
Or you can put it in a onload callback. (warning: this might interfere with other javascript on your site) If there is an existing window.onload, it is safe to add it at the beginning or end of that function.
window.onload = function(){
Codnitive.expand(document.getElementById('the-menu-parent-element-id'))
}
The element you want to target is: <ul class="level0 collapsible" ...
It doesn't have a id currently, so you can't directly use getElementById().
One solution (not my favorite approach) would be to add an id
<ul id="start-open" class="level0 collapsible" ...
And then expand it:
Codnitive.expand(document.getElementById('start-open'))
I think the best solution would be to modify the HTML to do what expand would do to it:
<li class="level0 nav-1 first parent collapsible" style="margin-left: 0px;">
<span class="plus-right " onclick="Codnitive.expandMenu(this.parentNode)" style="width: 16px; height: 16px;background-position: right center"></span>
<a class="collapsible-wrapper collapse-name" onclick="Codnitive.expandMenu(this.parentNode);return false;" href="#"><span class="category_name">WANT TO BE EXPANDED BY DEFAULT</span></a>
<ul class="level0 collapsible" style="margin-left: 5px; padding-left: 10px;display: block" expanded="1">
<span class="plus-right"... gets the style="...;background-position: right center".
<ul class="level0"... gets expanded="1" and style="...;display:block"
If this doesn't work for you, it would be really helpful to see a live version of your code. (The fiddle, lacking JS and CSS isn't enough)