jQuery аккордеон, щелкнув уже открытый элемент аккордеона, просто переключает его

Question

У меня есть полуработающий example, на который вы можете посмотреть.

Это похоже на работу, как хотелось бы большинству, хотя у него есть ошибка, которую я вижу во многих других аккордеонах, то есть если вы нажмете на уже открытую ссылку заголовка, она будет закрыта, а затем снова открыта.

Любые элегантные решения?

Вот JQuery

<script language="javascript"> 
     $(document).ready(function() { 

     // Simple Accordion Style Menu Function 
     $('h2.question').click(function() { 
      $('div.answer').slideUp('normal'); 
      $(this).next().slideDown('normal'); 
     }); 

     // Closes All Divs on Page Load 
     $("div.answer").hide(); 

     // Opens the first div 
     var Current = $('.question:first'); 
      Current.next().show(); 

     }); 
</script> 

А вот основная разметка Ищу использовать:

<div class="accordion"> 
     <h2 class="question"><a href="#">Header 1</a></h2> 
     <div class="answer"> 
      <p>some body content 1</p> 
      <p>some body content 2</p> 
      <p>some body content 3</p> 
     </div> 

     <h2 class="question"><a href="#">Header 2</a></h2> 
     <div class="answer"> 
      <p>some body content a</p> 
      <p>some body content b</p> 
      <p>some body content c</p> 
     </div> 

     <h2 class="question"><a href="#">Header 3</a></h2> 
     <div class="answer"> 
      <p>some body content x</p> 
      <p>some body content y</p> 
      <p>some body content z</p> 
     </div> 
</div> 

Answer 1

Вы можете попробовать добавить класс на h2 отметить его активный затем проверьте что на каждом h2 нажмите? Если на нем есть активный класс, то ничего не делать, поскольку он уже открыт. Также при загрузке страницы он дает первый h2question класс активных.

<script language="javascript"> 
     $(function() { 
      // Simple Accordian Style Menu Function 
      $('h2.question').click(function() { 
       if(!$(this).hasClass('active')) { 
       $('div.answer:visible').slideUp('normal').prev('h2.question').removeClass('active'); 
       $(this).addClass('active').next().slideDown('normal'); 
       } 
      }); 

      // Closes All Divs on Page Load 
      $("div.answer").hide(); 

      // Opens the first div 
      var Current = $('h2.question:first'); 
       Current.addClass('active').next().show(); 

      }); 
    </script>