jQuery-Collapse with link in header

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')

Answer 2

You can add to the a href="default2.html#id" an id and set it to the next ul id="id"

in this way with javascript you can show the correct list on loading.

---

Take a look here

http://jsfiddle.net/toroncino/an9Z2/