Spoiler code compatibility with IE&GC problem

[Avdon]

Hello,
I have created a bbcode to my phpbb forum. The bbcode is:

Spoiler: {TEXT1}

{TEXT}

HTML replacement:

<div style="margin:5px"><div><a class="closeAv" target="#"  onclick="if (this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display != ') { this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display = '; this.className='openAv';     this.innerText = '; } else { this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display = 'none'; this.className='closeAv'; this.innerText = ';}" >{TEXT1}</a></div><div><div style="display: none;padding:0 10px 0 5px;margin-top:5px;">{TEXT}</div></div></div>

CSS:

/*spoiler */
a.closeAv {
    text-decoration:none;
    color:#000!important;
    Font-weight:700;
    text-indent: 17px;
    Cursor: pointer;
    background:url(images/arrow_DW.png) no-repeat 0px 0px;
    display: block;
    height: 16px;
    width: 15px;
              
}
a.closeAv:hover{
    color:#D46400!important;
    text-decoration:none;
    background:url(images/arrow_DW.png) no-repeat 0px -16px;
}
a.openAv {
    text-decoration:none;
    color:#000!important;
    Font-weight:700;
    text-indent: 17px;
    Cursor: pointer;
    background:url(images/arrow_UP.png) no-repeat 0px 0px;
    display: block;
    height: 16px;
    width: 15px;
       
}
a.openAv:hover{
    color:#D46400!important;
    text-decoration:none;
    background:url(images/arrow_UP.png) no-repeat 0px -16px;
}

My intention is, by clicking on {TEXT1} the {TEXT} will show if it was hidden, and show it was shown.

The problem is that code is NOT working for IE and Chrome where {TEXT1} will disappear and not show again after the first click. I have no Idea how to make the code works for all browsers!

Can you help me with that?