$(function(){
    // hide all more info div's onload
    $("div.moreinfo").hide();

    // trigger on text with class "showmoreinfo"
    $("p.showmoreinfo").click(
        function() {
            var bookmark = this.id;
            if ( $("#"+bookmark+"_moreinfo").css("display") == 'none' ) {
                $("div.moreinfo").hide();                   // hide all more information div's
                $("#"+bookmark+"_moreinfo").show();         // show the more information div
            }
            else {
                $("#"+bookmark+"_moreinfo").hide();         // hide more information
            }
            $.scrollTo("p#"+bookmark);                      // scroll to bookmark
        }
    );

    // show more info bookmark?
    showBookmark();

    // trigger on arrows
    $("img.hidemoreinfo").click(
        function(){
            var moreinfodiv = $(this).parents('div.moreinfo');
            $(moreinfodiv).hide();
        }
    );
});

function showBookmark() {
    var url = window.location.href;
    var bookmarkStart = url.indexOf("#");

    // another option -- doesn't require exact the same id-name for the paragraph
    if ( bookmarkStart != -1 ){
        var bookmark = url.substr(bookmarkStart + 1);
        var pid = $("a[name="+bookmark+"]").parent("p").attr("id");     // look for a regular bookmark tag inside a paragraph
        if ( ! pid ) {
            pid = bookmark;                                 // assume the paragraph has an id with the same name as the bookmark
        }

        $("p#"+pid).click();                                // force click to trigger the click action
    }
}