I have worked out how to fade an element in: Click here to view the page

If you click on the heading Posture 1 : Standing Deep Breathing : you will notice the element fades in as it should. If you now click on posture 2 you will see the element fades in below posture 1. I need to be able to swap posture 1 with posture 2.

I have a total of 26 postures that all have images that need to fade in and then be swapped with another image when another heading is clicked.

$(document).ready(function(){   
$('#section_Q_01,#section_Q_02').hide();

$('h5.trigger#Q_01').click(function(){
    $('#section_Q_01').fadeIn(2000) ;
});

$('h5.trigger#Q_02').click(function(){
    $('#section_Q_02').fadeIn(5000) ;
}); 

});

and the html

                   <div id="section_Q_01" class="01">
                        <div class="pics"> 
                            <img src="../images/multi/poses/pose1/Pranayama._01.jpg"/> 
                            <img src="../images/multi/poses/pose1/Pranayama._02.jpg"/> 
                            <img src="../images/multi/poses/pose1/Pranayama._03.jpg"/> 
                        </div> 
                    </div>


                    <div id="section_Q_02" class="02">
                        <div class="pics"> 
                            <img src="../images/multi/poses/pose2/Half_Moon_Pose_04.jpg" /> 
                            <img  src="../images/multi/poses/pose2/Backward_Bending_05.jpg" /> 
                            <img src="../images/multi/poses/pose2/Hands_to_Feet_Pose_06.jpg" /> 
                        </div> 
                    </div>                  

I need to be able to swap a total of 26 elements #section_Q_01 - #section_Q_26 Any help appreciated