Toggle button stay :active until clicked again. Mootools

Question

I'm working with this page:

http://www.bluebeam.com/us/support/ipad/

I want the buttons that toggle open/close the question to display a "+" when it's closed and a "-" when it's opened. I've set the "active" class to add the content "-" but it's not staying "active" when the answer is revealed.

I tried adding a .setStyle to the js but that didn't seem to do anything either.

Here is a fiddle of what I'm doing for the buttons now:

http://jsfiddle.net/ajrdesign/pT6Vu/

Answer 1

you cannot access element pseudos via js at all. so you create some new styles and work with parent instead.

http://jsfiddle.net/dimitar/pT6Vu/1/

.tips_tricks button:after {
    content:"+";
}


.tips_tricks button.on:after {
    content:"-";
}

then onClick you toggle class 'on' and voila.

the only way you can set a different relationship is via an attribute link.

.tips_tricks button:after {
    content: attr(data-content);
}

then el.set('data-content', '-'); - though i'd say this is less reliable.

see http://jsfiddle.net/dimitar/pT6Vu/2/