accordéon si/sinon logique

Question

Je suppose que ma logique if/else est faussée. Fondamentalement, j'ai une structure en accordéon où, au chargement de la page, le premier accordéon est à moitié révélé à une hauteur de 150px. Ensuite, lorsque l'utilisateur clique sur l'en-tête accordéon, il s'ouvre complètement à une hauteur de 320px. Au clic suivant, il devrait se fermer et agir normalement comme les autres éléments d'accordéon avec un cache/show standard. Il fonctionne actuellement bien mais il n'est pas lisse et le volet d'accordéon se ferme avant qu'il ne se révèle pleinement.

Voici le html:

<div class="accordion"> 
     <h3 class="acc-header glanceH">At a glance</h3> 
     <div class="acc-content glanceC slider" > 
     <div class="hero-video"> 
     </div> 
     </div> 
     <h3 class="acc-header">What we do</h3> 
     <div class="acc-content" > 
     <div class="hero-video what-we-do"> 
     </div> 
     </div> 
     <h3 class="acc-header">How we do it</h3> 
     <div class="acc-content how" > 
     </div> 
     <h3 class="acc-header">Where we reach</h3> 
     <div class="acc-content where" > 
     </div> 
     <h3 class="acc-header">How</h3> 
     <div class="acc-content" > 
     </div> 
    </div> 

Voici le jQuery:

//generally slides all accordion elements with class "acc-content" when div with class "acc-header" is clicked 

$('.acc-header').click(function(e) { 
     e.preventDefault(); 
     $(this).toggleClass('acc-active'); 
     $(this).next('.acc-content').slideToggle(200).siblings('.acc-content').slideUp(200); 
     $(this).siblings().removeClass('acc-active');  
    }); 

//when the page loads 'peek' at the content of the first accordion content (to 150px depth) 

    $('.slider').css('height','150px'); 
    $('.slider').animate({ height: 'show'}, 'slow').addClass('itsopen');  

//if its already been opened, close it, else open it to 320px 

    $('.glanceH').click(function() { 
       if(!$(this).hasClass('acc-active')) { 
        $(this).next().siblings('.acc-content').slideUp(2000); 
        $(this).siblings().removeClass('acc-active'); 
       } 
       else if($('.slider').hasClass('itsopen')){ 
        $('.slider').animate({ height: 320}, 'slow'); 
       } 
    }); 

Answer 1

Mise à jour: Oops, il serait utile si je lis la question - Here is a demo: P

//generally slides all accordion elements with class "acc-content" when div with class "acc-header" is clicked 
$('.accordion .acc-header').click(function() { 
    var first = $('.slider'); 

    // open peek if clicked, otherwise hide it 
    if (first.is('.itsopen')) { 
     if ($(this).next().is('.acc-active')) { 
      // open peek to full height 
      first.removeClass('itsopen').animate({ height: '320px' }, 'slow'); 
      return; 
     } else { 
      // close first because a different header was clicked 
      first.removeClass('itsopen acc-active').slideUp('slow'); 
     } 
    } 

    // remove active class from all content 
    $('.acc-content').removeClass('acc-active'); 
    // show active content 
    $(this).next().addClass('acc-active').toggle('slow'); 
    // close all content that isn't active 
    $('.acc-content:not(.acc-active').slideUp('slow'); 
    return false; 

}) 
// initialize accordion with all content closed 
.next().hide(); 

//when the page loads 'peek' at the content of the first accordion content (to 150px depth) 
$('.slider') 
    .css({ height: '0px' }) 
    .show() 
    .animate({ height: '150px' }, 'slow') 
    .addClass('itsopen acc-active');