jquery verbergen den aktiven Akkordeon Inhalt

Question

Im Implementieren grundlegende jquery Akkordeon, wenn der Akkordeon Inhalt geöffnet ist, werden beide nach oben und rutschen nach unten Aktionen durchgeführt. Es sollte nur das Inhalts-Div verstecken (schieben). Brauchen Sie jemandes Hilfe.

$(document).ready(function() { 
    $("h3").click(function() { 
    if ($(".accordion-content").is(":visible")) { 
     $(".accordion-content").slideUp(600); 
     $("span.plusminus").text("+"); 
    } 
    $(this).next(".accordion-content").slideDown(600); 
    $(this).find("span.plusminus").text("-"); 
    }); 
}); 

h3 { 
    background: #ccc; 
    padding: 10px; 
} 
.accordion-content { 
    display: none; 
    height: 50px; 
} 
.plusminus { 
    float: right; 
} 

<div class="accordion_container"> 
    <h3>Lorem Ipsum<span class="plusminus">+</span></h3> 
    <div class="accordion-content"> 
    <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.</p> 
    </div> 
    <h3>Lorem Ipsum<span class="plusminus">+</span></h3> 
    <div class="accordion-content"> 
    <p>Works fine</p> 
    </div> 
    <h3>Lorem Ipsum<span class="plusminus">+</span></h3> 
    <div class="accordion-content"> 
    <p>Works fine</p> 
    </div> 
</div> 

Answer 1

Sie tun können,

$("h3").click(function() { 
    if ($(".accordion-content").is(":visible")) { 
    $(".accordion-content").not($(this).next()).slideUp(600); 
    $("span.plusminus").text("+"); 

    } 
    $(this).next(".accordion-content").slideToggle(600); 
    $(this).find("span.plusminus").text("-"); 
}); 

Fiddle

1. Verwenden SlideToggle() für das aktuelle cliked Element.
2. USe slideUp() für alle Elemente außer dem aktuellen.

Fix für Icon

$("h3").click(function() { 
    var icon = $(this).find("span.plusminus"); 
    $(".accordion-content").not($(this).next()).slideUp(600); 
    $("span.plusminus").not(icon).text("+"); 
    $(this).next(".accordion-content").slideToggle(function() { 
    if ($(this).is(":visible")) { 
     icon.text("-"); 
    } else { 
     icon.text("+"); 
    } 
    }); 
}); 

Edited Fiddle

Answer 2

Ich würde es auf diese Weise tun:

$(document).ready(function(){ 
$('.plusminus').click(function(e){ 
    e.preventDefault(); 
    if (!$(this).hasClass('open')){ 
    $(this).addClass('open'); 
    $(".accordion-content").slideDown(600); 
    }else{ 
    $(this).removeClass('open'); 
    $(".accordion-content").slideUp(600); 
    } 
}); 
}