在多层次手风琴中增加活动课

Question

I have a multi level accordion but only missing the active class, only for the active/open panel, without changing anything else, any help?

JS:

$('.toggle').click(function(e) {
e.preventDefault();

var $this = $(this);

if ($this.next().hasClass('show')) {
    $this.next().removeClass('show');
    $this.next().slideUp(350);
} else {
    $this.parent().parent().find('li .inner').removeClass('show');
    $this.parent().parent().find('li .inner').slideUp(350);
    $this.next().toggleClass('show');
    $this.next().slideToggle(350);}
});

here is the CodePen: https://codepen.io/mozes22/pen/XxQEBp

Answer 1

Please check this code.

 <style> ul {list-style: none; padding: 0;} ul .inner {padding-left: 1em; overflow: hidden; display: none;} ul .inner.show { /*display: block;*/} ul li {margin: 0.5em 0;} ul li a.toggle {width: 100%; display: block; background: grey; color: #fefefe; padding: 0.75em; border-radius: 0.15em; transition: background 0.3s ease; text-decoration: none;} ul li a.toggle:after {content: '\\002B'; float: right;} ul li a.toggle:hover { background: yellow;} .modal-dialog { max-width: 70% !important; margin: auto;} .modal-content {height: 500px; } .modal-body {background-color: rgb(3, 119, 184); height: 250px; overflow-y: scroll;} </style> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js'></script> <ul class="accordion"> <li> <a class="toggle" href="javascript:void(0);"><b>- Technical for Sales People</b></a> <ul class="inner">test</ul> </li> <li> <a class="toggle" href="javascript:void(0);"><b>- New to Car Sales Foundation</b></a> <ul class="inner">test2</ul> </li> </ul> <script> $(document).ready(function() { $(".inner").hide(); $(".inner:first").show(); $(".toggle").click(function(){ if ($(this).is(".show")) { $(this).removeClass("show"); $(this).next(".inner").slideUp(400); } else { $(".inner").slideUp(400); $(".toggle").removeClass("show"); $(this).addClass("current"); $(this).next(".inner").slideDown(400); } }); }); </script> 

Answer 2

I have made a couple of changes to your js. - https://jsfiddle.net/LordJording/ftr4j0Ly/2/

$this.removeClass('is-active');

The line above removed the class if you are closing the current open accordion

$this.parent().parent().find('.is-active').removeClass('is-active');
$this.addClass('is-active');

The first line looks at all the siblings and tried to locate an already active element and removed the class is-active The second line then adds an is-active class to the current item you are toggling

$('.toggle').click(function(e) {
    e.preventDefault();

    var $this = $(this);

    if ($this.next().hasClass('show')) {
        $this.removeClass('is-active');
        $this.next().removeClass('show');
        $this.next().slideUp(350);
    } else {
        $this.parent().parent().find('.is-active').removeClass('is-active');
        $this.addClass('is-active');
        $this.parent().parent().find('li .inner').removeClass('show');
        $this.parent().parent().find('li .inner').slideUp(350);
        $this.next().toggleClass('show');
        $this.next().slideToggle(350);
    }
});

Then in your CSS you will need to style your toggle element if it has the class is-active

.toggle.is-active {
    background-color: #ff00ff;
}

I noticed in your codepen demo you are using inline styling on the nested accordion, you might want to remove this from being inline and use your linked stylesheet instead as it might cause issues with your styling.