Откройте div и закройте других

Таким образом, у меня есть раздел, где я бы хотел щелкнуть по изображению и .speaker-info анимацию .speaker-info, переключив класс .open на .speaker-container чтобы анимировать высоту, чтобы показать .speaker-info при переключении класса .hover для изображение состояния зависания. Класс .fade также переключается на .speaker-info чтобы изменить непрозрачность. У меня все работает нормально, если я нажму одно изображение и закрою его в том же месте, но когда я открою его и нажмите другое изображение, все закрывается, поэтому мне нужно два щелчка, чтобы открыть другой, и изображение наведения будет включено для предыдущее изображение.

Поэтому я хотел бы открыть один div, а затем, если бы щелкнуло другое изображение, все закрылось, а последнее открылось. Я крутился по кругу, пытаясь понять, как это сделать... но я продолжаю ударять по стене,

Я в основном запускаю все, переключая классы css, чтобы создать открытие/закрытие и зависание.

Вот мой код.

Кроме того, я ищу мнения о том, как сделать мой код более проворным и более эффективным, иногда мне кажется, что я пишу waaay многим, где я мог бы сделать то же самое с несколькими строками меньше.

Благодарю!

<section id="speakers">
 <div class="container">
  <div class="row">
   <div class='speaker-container'>
    <div class="span3 offset1" id="{row_index}">
      <div class="speaker-img">
       <img src="{speaker_image}" alt="{speaker_name}" class="hover">
        <img src="{speaker_hover}" alt="{speaker_name}">
      </div>
        <h4>{speaker_name}</h4>
      </div>
      <div class="speaker-info">
        <button class="close-speaker">Close</button>
        <h3>{speaker_name}{if speaker_title}, {speaker_title}{/if}</h3>
        <p>{speaker_bio}</p>
      </div>
   </div>             
  </div>
 </div>
</section> {!-- /End Speakers --}

Коды Javascript

   $('.speaker-container').each(function(){

    var containerHeight = $(this).height(); 
    $('.speaker-info').css({ 'top' : containerHeight});

    });

      $('#speakers .span3').on('click', function(){
      var containerHeight = $(this).parent('.speaker-container').height();
      var h = $(this).next('.speaker-info').height();
      var totalHeight = containerHeight + h;

      $(this).find('.speaker-img').children().toggleClass('hover');

      $('#speakers .span3').not($(this).next('.speaker-info')).next('.speaker-info').removeClass('fade');

      if (!$('.speaker-info').hasClass('fade') && !$('.speaker-container').hasClass('open')) {

        $(this).closest('.speaker-container').css({'height' : totalHeight}).addClass('open');
        $(this).next('.speaker-info').addClass('fade');

      } else {

        $('.speaker-container').css({'height' : h}).removeClass('open');
        $(this).next('.speaker-info').toggleClass('fade');
        $('.speaker-info').removeClass('fade');  
      }

    });

    $('.close-speaker').on('click', function() {
    var container = $(this).closest('.speaker-info').height();
    $(this).closest('.speaker-container').css({'height' : container}).removeClass('open');
    $('.speaker-info').removeClass('fade');
    });