mootools accordion styling problem

I just built my first mootools accordion, but it is adding a lot of inline styles which is just ruining my UI. I can set up a inline style with !important keyword but it will just make my css maintenance a nightmare. any ideas how to get rid of the inline styles

It is just this

<script language="javascript">
   window.addEvent('domready', function() {

 //create our Accordion instance
 var myAccordion = new A开发者_StackOverflowccordion($('accordion'), 'div.subTreeHeader', 'div.accordionElement', {
 opacity: false, fixedHeight:400

 });

});

</script>

---

Well this is quite old question, I answer it because I run to it when looking for the same problem.

Actually Mootools Acordion adds this much inline CSS:

padding-top: 0px; border-top-style: 
none; padding-bottom: 0px; border-bottom-style: none; 
overflow: hidden; opacity: 1;

The solutions I found for this are fixes that have to be applied after calling the new Fx.Accordion. I also agree that feels wrong to fix with !important CSS fixing. So I also looked for other options.

Option 1, set back the css as you want:

$$('.acordion3_content').setStyles({
    border: '3px solid #0F0',
    'overflow-y': 'auto',
});

Option 2, create one more div inside or outside it. I did this option to get a scroll div I could have events connected to. Like this I could have a scroll inside the accordion's content without it being affected of Fx.Acordion's CSS.