Hi there,

I have put together an accordion menu using css, html (ul, li tags) and javascript.

I'd like the arrows on the collapsible menus should change state depending on if they're open or not. The triangle turner should point right when the content is closed and can be opened. The triangle turner should point up when the content is open and can be closed.

But I'm not sure how to replace this arrow image css using javascript.

css to open menu: level01_top_link_subnav_open
css to close menu: level01_top_link_subnav_close

I have attached the menu page and its associated files (see the zip file).
You can view the menu here: http://praky.com/demo/gui-prototype/accordion/navmenu_accordion.html

I'd appreciate if someone can help me with this.

Many thanks in advance.

This

function toggle(that) {
    if (that.getAttribute('class') == 'level01_top_link_subnav_close') {
        that.setAttribute('class', 'level01_top_link_subnav_open')
    } else {
        that.setAttribute('class', 'level01_top_link_subnav_close')
    }
}

will do one of these

<a id="010" class="level01_top_link_subnav_close" href="javascript:void 0;" onclick="javascript:toggle(this);hideShow('D010');">

as shown.

Either do the same for all the others or - probably better - modify hideShow() to do likewise.

Note: this works in non-IE browsers plus IE8 in standards mode; other IE versions require additional code.

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.