How to toggle this link on a webpage?

Question

I'd like to automatically click a toggle link on a webpage. I have not been able to modify other userscripts since this webpage seems to do its toggle differently.

The webpage is anidb.net/perl-bin/animedb.pl?show=animelist and the toggle is a button, in the right-hand column, next to "Save/Load Settings" (if you are logged in, or next to "Reset" if you are not).

The following HTML seems to be what controls the toggle.

<div class="g_menu filter_menu expanded">
    <h3>
        <a class="i_icon i_expanded" title="Toggle display of menu"></a>
    </h3>

I tried a few of the methods from another Stack Overflow question but couldn't get them to work.

Answer 1

That toggle control is added by javascript (jQuery), so you must use AJAX-aware techniques to access it.
See Choosing and activating the right controls on an AJAX-driven site.

The link, that you indicated, has a CSS class (i_expanded) that makes a great selector for waitForKeyElements(). So, the resulting complete script for that site is simple:

// ==UserScript==
// @name     aniDB, auto-close the sidebar menu
// @match    *://anidb.net/perl-bin/animedb*
// @require  http://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js
// @require  https://gist.github.com/raw/2625891/waitForKeyElements.js
// @grant    GM_addStyle
// ==/UserScript==
/*- The @grant directive is needed to work around a design change
    introduced in GM 1.0.   It restores the sandbox.
*/
waitForKeyElements (
    ".filter_menu.expanded .i_expanded", clickNode, true
);

function clickNode (jNode) {
    var clickEvent  = document.createEvent ('MouseEvents');
    clickEvent.initEvent ('click', true, true);
    jNode[0].dispatchEvent (clickEvent);
}