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
