Question

I using Daniel Stocks jQuery-Collapse with cookies,
which works great.

https://github.com/danielstocks/jQuery-Collapse

Hi, does anyone know how I can make one
of the headers a link? So when clicked
it links to another page also containing the menu,
and when this page is loaded, the clicked
menu is expanded showing the sub items.

In the example below, I need fruits to link
to another page and to be expanded at this
page:

 <div class="demo">             
                <h3><a href="default2.html">Fruits</a></h3>
                <ul>
                    <li>Apple</li>
                    <li>Pear</li>
                    <li>Orange</li>
                </ul>
                <h3>Vegetables</h3>
                <ul>
                    <li>Carrot</li>
                    <li>Tomato</li>
                    <li>Squash</li>
                </ul>
                <h3>Colors</h3>
                <ul>
                    <li>Green</li>
                    <li><a href="http://en.wikipedia.org/wiki/Yellow">Yellow</a></li>
                    <li><a href="http://en.wikipedia.org/wiki/Orange_(colour)">Orange</a></li>
                </ul>
            </div>

Any help would be appreciated 🙂

Answer 1

Another problem i’m seeing is that the plugin will ignore the h3 with the link inside it.

so you’ll need to combine this with a custom show() handler.

HTML

<h3 id="fruits" rel="index2.html#fuits">Fruits</h3>
<ul>
  <li>Apple</li>
   <li>Pear</li>
   <li>Orange</li>
 </ul>
...

JS

$(".demo").collapse({
    head: "h3",
    group: "ul",
    show: function() {
       if($(this).prev().attr('rel')){
           // open a window with the rel value as the location.
           window.location=($(this).prev().attr('rel'));
       }
       $(this).show()
    },
    hide: function(){
       $(this).hide()
    }
});

Then using the method mentioned by @Andrea simply set the item you want opened in the other page to be active.

so in this example if the url was #fruits then the item we’d open on load would be the h3 with id=”fruits”

To do this you can use.

if(window.hash){
    $("#"+window.hash).addClass('active')