Jquery исчезает и заменяет элемент при нажатии, который также будет относиться к аккордовому меню.

Вы заметите, что когда вы нажимаете позу 1, описание выпадает, а изображения появляются справа. Теперь, когда вы нажимаете позу 2 или позу 3, изображения и описание меняются так, как должны.

просмотреть веб-сайт

Что мне нужно сделать сейчас, это -

Если была нажата поза 1, а затем поза 2, меню позы 1 должно быть закрыто, чтобы одновременно было видно только одно описание позы.

Если бы я мог также сделать так, чтобы при щелчке по текущему открытому элементу позы он закрывался, и не было описаний открытых поз, которые также не отображали изображения справа.

Наконец, есть ли способ убедиться, что работает только один набор анимационных изображений, потому что, скажем, пользователь просматривает все 26 вариантов, и они продолжают работать в фоновом режиме, это может стать вялым (спасибо Нику Крейверу за это).

На данном этапе доступны только позы 1, 2 и 3. Хорошо, наконец, какой-то код -

//Description drop-down boxes

$(документ).готовый(функция(){

//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");
});

});

//Изображения справа появляются и исчезают благодаря 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 }); });

Описание ящиков -

<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>

и изображения справа -

 <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>                  

Было бы неплохо, если бы изображения исчезали при нажатии на другой элемент... но это не имеет большого значения.

Спасибо, что посмотрели