You will notice when you click posture 1 the description drops down and images appear on the
right. Now when you click posture 2 or posture 3 the images and description change as they should.
What I need
to do now is -
If posture 1 has been clicked and then posture 2 is clicked the posture 1 menu needs
to close so that there is only one posture description visible at one time.
If I could also make it so that if the current open posture item is clicked so that it closes and there are no open posture descriptions that there also no images displayed on the
right.
Finally is there a way
to make sure only one set of animation images is running, because just say the user goes through all 26 options and they continue
to run in the background it may get sluggish (thanks
to Nick Craver for bringing that up).
At this stage only posture 1, 2 and 3 are available. Ok finally some code -
//Description drop-down boxes
$(document).ready(function(){
//Hide (Collapse) the toggle containers on load
$(".toggle_container").hide();
//Switch the "Open" and "Close" state per click
$("h5.trigger").toggle(function(){
$(this).addClass("active");
}, function () {
$(this).removeClass("active");
});
//Slide up and down on click
$("h5.trigger").click(function(){
$(this).next(".toggle_container").slideToggle("slow");
});
});
//Images on the
right fade in and out thanks
to aSeptik
$(document).ready(function(){
$('#section_Q_01,#section_Q_02,#section_Q_03').hide();
$(function() {
$('h5.trigger a').click( function(e) {
e.preventDefault();
var trigger_id = $(this).parent().attr('id'); //get id Q_##
$('.current').removeClass('current').hide(); //add a class for easy access & hide
$('#section_' + trigger_id).addClass('current').fadeIn(5000); //show clicked one
});
});
});
//Fading pics
$(document).ready(function(){
$('.pics').cycle({
fx: 'fade',
speed: 2500
});
});
Description boxes -
<h5 class="trigger" id="Q_01" ><a href="#">Posture 1 : Standing Deep Breathing :</a></h5>
<div class="toggle_container" >
<div class="block">
<span class="sc">Pranayama Series</span>
<p class="bold">Benefits:</p>
</div>
</div>
<h5 class="trigger" id="Q_02" ><a href="#">Posture 2 : Half Moon Pose With Hands
To Feet Pose :</a></h5>
<div class="toggle_container">
<div class="block">
<span class="sc">Ardha Chandrasana with Pada-Hastasana</span>
<p class="bold">Benefits:</p>
</div>
</div>
<h5 class="trigger" id="Q_03" ><a href="#">Posture 3 : Awkward Pose :</a></h5>
<div class="toggle_container">
<div class="block">
<span class="sc">Utkatasana</span>
<p class="bold">Benefits:</p>
</div>
</div>
and the images on the
right -
<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>
<div id="section_Q_03" class="03">
<div class="pics">
<img src="../images/multi/poses/pose3/Awkward_01.jpg" />
<img src="../images/multi/poses/pose3/Awkward_02.jpg" />
<img src="../images/multi/poses/pose3/Awkward_03.jpg" />
</div>
</div>
It would be a bonus if images faded out when another element is clicked... but not a big deal.
Thanks for having a look
