手风琴代码无法正常工作，如何解决？

Question

I am trying to make my own accordion for my portfolio page template, for my website. xtractweb.com as once any one click the accodion respective work-snippet will be shown etc ... for now i am trying with this demo but i stuck in middle. The code i am currently using is given below: Html code snippet:

<div class="accordion-content">
   <ul>
     <li class="current">
       <h3>Donec at neque eget lacus lobortis molestie</h3>
       <div class="content current">
           <p>Nulla risus orci, viverra nec lacinia at, aliquam vel justo. Phasellus felis purus, placerat vel augue vitae, aliquam tincidunt dolor. Sed hendrerit diam in mattis mollis. Donec ut tincidunt magna. </p>
       </div>
     </li>
     <li class="">
       <h3>Phasellus felis purus, placerat vel augue vitae</h3>
       <div class="content" style="display: none;">
          <p>Nulla risus orci, viverra nec lacinia at, aliquam vel justo. Phasellus felis purus, placerat vel augue vitae, aliquam tincidunt dolor. Sed hendrerit diam in mattis mollis. Donec ut tincidunt magna. </p>
       </div>
     </li>
 </ul>
</div>

and here is the jquery code:

$('.accordion-content ul li h3').click(function(){
    var parent = $(this).parent('li');
    if(parent.hasClass('current')){
        $(this).next('div').slideUp();
        parent.removeClass('current');
        //$(this).parent('li').children('.content').slideUp();
    }
    else
    {
        parent.siblings().children('div').stop(true,true).slideUp();
        parent.addClass('current');
        parent.siblings().removeClass('current');
        $(this).next('div').slideDown();
        $(this).parent('li').addClass('current');
        //$(this).parent('li').children('.content').slideDown();
    }
});

while all my css showing the work good ... the problem is that once i click the h3 it shows the div content, but once i click another h3 quickly than old div shown, it destroys the whole process and results not shows as i want... any one suggest me what to do now or any easier method than that ... ? here is the css code snippet:

.accordion-content {
    li {
      margin-bottom: 10px;
      border: 1px solid #dedede;
      background: #ececec url("../images/plus-minus.png") no-repeat;
      background-position: 96% 45%;
      background-width: 8px;
      background-height: 10px ;
      &.current {
        background: #ececec url("../images/minus.png") no-repeat;
        background-position: 96% 11%;
      }
    }
    h3 {
      font-size: 16px;
      font-family: 'open sans', sans-serif;
      text-align: left;
      color: #2c2725;
      padding: 10px 0 10px 20px;
      &:hover {
        cursor: pointer;
      }
    }
    .content {
      width: 100%;
      background: #ffffff;
      padding: 10px 0 10px 0;
      text-align: center;
      display: none;
      text-align: left;
      padding: 15px;
      padding-bottom: 55px;
      p {
        font-size: 14px;
        line-height: 24px;
        color: #7f8281;
      }
    }
    .current {
      display: block;
    }
  }

Regards

Answer 1

Here is the might help you.

jQuery Code

$('.accordion-content').find('h3').click(function(){
    $('.content').slideUp(); // Hide all content.
    $(this).next().slideDown(); // show current clicked heading detail
    $(this).parent().addClass('current').siblings('li').removeClass('current');  // add current class to current clicked heading and remove from another heading.
});

Fiddle Demo

Answer 2

the problem is not there as i fell, just look at the code snippet in jsfidle http://jsfiddle.net/gkQ3Y/1/ your results looking cool. what else you think you want ? the only change which i feel is that, you should add

.stop(true,true)

to make your accordion load properly, as you just clicks early than it loads and results looks different than you expect. so, your new code snippet will look like shown below:

 $('.accordion-wrapper .accordion-content ul li h3').click(function(){

    var parent = $(this).parent('li');
    if(parent.hasClass('current')){
        $(this).next('div').stop(true,true).slideUp();
        parent.removeClass('current');
        //$(this).parent('li').children('.content').slideUp();
    }
    else
    {
        parent.siblings().children('div').stop(true,true).slideUp();
        parent.addClass('current');
        parent.siblings().removeClass('current');
        $(this).next('div').stop(true,true).slideDown();
        $(this).parent('li').addClass('current');
        //$(this).parent('li').children('.content').slideDown();
    }
});

i hope it will be making every thing fine right now, and your whole code is enough to do the work, while just these two lines will do the rest of the work now. Regards