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

Question

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

view website

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

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

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

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

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

//Description drop-down boxes 

$ (документ) .ready (функция() {

//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 $ (документ) .ready (функция() {
$ ('# section_Q_01, # section_Q_02, # section_Q_03') скрыть();.

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

$ (документ) .ready (функция() { «. Фото. $() цикл ({ FX: 'увядает', скорость: 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>     

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

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

Answer 1

DEMO:http://jsbin.com/aceze/28 ИСТОЧНИКhttp://jsbin.com/aceze/28/edit

Jquery КОД:

$(function() { 
$('h5.trigger a').click(function(e) { 
e.preventDefault(); 
//TOGGLE PART 
$('.block').slideUp(400); 
    if($(this).parent().next().is(':hidden')){ 
     $(this).parent().next().slideDown(400); 
    } 
//DISPLAY HIDE BASED ON CLICK 
var trigger_id = $(this).parent().attr('id'); 
$('.current').removeClass('current').hide(); 
$('#section_' + trigger_id).addClass('current').fadeIn(500); 
// IMAGE SLIDER 
$('#section_' + trigger_id +' .pics img:gt(0)').hide(); 
    setInterval(function(){ 
     $('#section_' + trigger_id +' .pics :first-child').fadeOut() 
     .next('img').fadeIn() 
     .end().appendTo('#section_' + trigger_id +' .pics');}, 
     3000); 
    }); 
});​ 

HTML ПЕРЕКЛЮчЕНИЕ часть должна выглядеть следующим образом

<div class="toggle_container"> 
<h5 class="trigger" id="Q_01" ><a href="#">Posture 1 : Standing:</a></h5> 
    <div class="block" style="display: none"> 
     <span class="sc">Pranayama Series</span> 
     <p class="bold">Benefits:</p> 
    </div> 
</div>