Hallo,

Ik heb een voorpagina met daarop 3 veelgestelde vragen. De veel gestelde vragen staan allemaal beschreven op de pagina /veelgesteldevragen/
Om ze overzichtelijk te houden heb ik ze ín een accordeon geplaatst, kan (en hoe?) krijg ik de accordeon opengeklapt op het juiste onderwerp zodra een bezoek via de link van de voorpagina komt als ik gebruik maak van <a hreft="/veelgesteldevragen/#123>123</a> en <a name="123"> ?

Ik gebruik het volgende scriptje als accordeon:

Code:

/* 
Simple JQuery menu.
HTML structure to use:

Notes: 

Each menu MUST have a class 'menu' set. If the menu doesn't have this, the JS won't make it dynamic
If you want a panel to be expanded at page load, give the containing LI element the classname 'expand'.
Use this to set the right state in your page (generation) code.

Optional extra classnames for the UL element that holds an accordion:

noaccordion : no accordion functionality
collapsible : menu works like an accordion but can be fully collapsed

<ul class="menu [optional class] [optional class]">
<li><a href="#">Sub menu heading</a>
<ul>
<li><a href="http://site.com/">Link</a></li>
<li><a href="http://site.com/">Link</a></li>
<li><a href="http://site.com/">Link</a></li>
...
...
</ul>
// This item is open at page load time
<li class="expand"><a href="#">Sub menu heading</a>
<ul>
<li><a href="http://site.com/">Link</a></li>
<li><a href="http://site.com/">Link</a></li>
<li><a href="http://site.com/">Link</a></li>
...
...
</ul>
...
...
</ul>

Copyright 2007-2010 by Marco van Hylckama Vlieg

web: http://www.i-marco.nl/weblog/
email: marco@i-marco.nl

Free to use any way you like.
*/


jQuery.fn.initMenu = function() {  
    return this.each(function(){
        var theMenu = $(this).get(0);
        $('.acitem', this).hide();
        $('li.expand > .acitem', this).show();
        $('li.expand > .acitem', this).prev().addClass('active');
        $('li a', this).click(
            function(e) {
                e.stopImmediatePropagation();
                var theElement = $(this).next();
                var parent = this.parentNode.parentNode;
                if($(parent).hasClass('noaccordion')) {
                    if(theElement[0] === undefined) {
                        window.location.href = this.href;
                    }
                    $(theElement).slideToggle('normal', function() {
                        if ($(this).is(':visible')) {
                            $(this).prev().addClass('active');
                        }
                        else {
                            $(this).prev().removeClass('active');
                        }    
                    });
                    return false;
                }
                else {
                    if(theElement.hasClass('acitem') && theElement.is(':visible')) {
                        if($(parent).hasClass('collapsible')) {
                            $('.acitem:visible', parent).first().slideUp('normal', 
                            function() {
                                $(this).prev().removeClass('active');
                            }
                        );
                        return false;  
                    }
                    return false;
                }
                if(theElement.hasClass('acitem') && !theElement.is(':visible')) {         
                    $('.acitem:visible', parent).first().slideUp('normal', function() {
                        $(this).prev().removeClass('active');
                    });
                    theElement.slideDown('normal', function() {
                        $(this).prev().addClass('active');
                    });
                    return false;
                }
            }
        }
    );
});
};

$(document).ready(function() {$('.menu').initMenu();});

Helemaal niemand een idee?

Dit is zeker mogelijk.

Bij het openen van de pagina kan je gaan controleren of er een hash parameter is gespecificeerd. Vervolgens kan je dan deze parameter gaan ophalen om op die manier de juiste accordeon te openen.

Code:

if (window.location.hash){
    var hash = window.location.hash.substring(1); // Substring nemen om # karakter te verwijderen
    // Juiste accordeon openen door bvb. click event op te roepen
}

Om het andere probleem op te lossen kan je je links wijzigen naar volgend formaat:

Code:

<a href="#123">Bekijk 123</a>

Op deze manier kan je gebruik maken van het hashchange event. Vervolgens kan je zowel de gewone JavaScript als de jQuery manier gebruik om dergelijke events op te vangen.

Code:

// JavaScript manier
window.addEventListener("hashchange", hashChange, false);

// jQuery manier
$(window).on('hashchange', function () {
    // Gewijzigde hash ophalen en juiste accordeon openen
});