Hide and accordion

Hide and accordion

Hello,

i am new to this Forum and have a question: I got  a <DIV> like shown in the code with 2 images as list elements:

  1. <div class="grid_8" id="navi_produkte"><!-- navi_produkte -->
                       
                        <ul id="first-step-navi">
                            <li><a href="indoor.html"><img src="img/indoor.jpg" width="308" height="203" alt="Indoor"/></a></li>
                            <li><a href="outdoor.html"><img src="img/outdoor.jpg" width="308" height="203" alt="Outdoor"/></a></li>
                        </ul>
                       
                   
                   
                    </div><!-- end navi_produkte -->










What i want to do is: when i click on one of these images both images should hide and  in this <div> should be indoor.html loaded wich is a UL with nested lists and UL's as an accordion.