jQuery Toggle not working properly with newer jQuery version

Question

I have some issue with jQuery Toggle as you can see in the picture. The main issue is because of jQuery version. With version 1.8.3 works perfect, with 2.0.3 the result bellow.

Any idea how can I fix this?

You can check it here in jsfiddle: enter link description here using jquery 1.8.3 works good and with 2.0.X it doesn't work.

The JavaScript code is here:

$(".toggle-container").hide();
$(".trigger").toggle(function(){
    $(this).addClass("active");
    }, function () {
    $(this).removeClass("active");
});
$(".trigger").click(function(){
    $(this).next(".toggle-container").slideToggle();
});

$(".trigger.opened").toggle(function(){
    $(this).removeClass("active");
    }, function () {
    $(this).addClass("active");
});

$(".trigger.opened").addClass("active").next(".toggle-container").show();

And the HTML part is here:

    <div class="two-thirds column">

        <!-- Toggle 1 -->
        <div class="toggle-wrap">
            <span class="trigger opened"><a href="#"><i class="toggle-icon"></i> Test </a></span>
            <div class="toggle-container">
                <p>Perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam. Donec ut volutpat metus. Vivamus justo arcu, elementum a sollicitudin pellentesque, tincidunt ac enim. Proin id arcu ut ipsum vestibulum elementum.</p>
            </div>
        </div>

        <!-- Toggle 2 -->
        <div class="toggle-wrap">
            <span class="trigger"><a href="#"><i class="toggle-icon"></i> Test?</a></span>
            <div class="toggle-container">
                <p>Seded ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam. Donec ut volutpat metus. Aliquam tortor lorem, fringilla tempor dignissim at, pretium et arcu.</p>
            </div>
        </div>

        <!-- Toggle 3 -->
        <div class="toggle-wrap">
            <span class="trigger"><a href="#"><i class="toggle-icon"></i> Test?</a></span>
            <div class="toggle-container">
                <p>Seded ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam. Donec ut volutpat metus. Aliquam tortor lorem, fringilla tempor dignissim at, pretium et arcu.</p>
            </div>
        </div>

        <!-- Toggle 4 -->
        <div class="toggle-wrap">
            <span class="trigger"><a href="#"><i class="toggle-icon"></i> Test?</a></span>
            <div class="toggle-container">
                <p>Seded ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam. Donec ut volutpat metus. Aliquam tortor lorem, fringilla tempor dignissim at, pretium et arcu.</p>
            </div>
        </div>

        <!-- Toggle 5 -->
        <div class="toggle-wrap">
            <span class="trigger"><a href="#"><i class="toggle-icon"></i> Test</a></span>
            <div class="toggle-container">
                <p>Seded ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam. Donec ut volutpat metus. Aliquam tortor lorem, fringilla tempor dignissim at, pretium et arcu.</p>
            </div>
        </div>

        <!-- Toggle 6 -->
        <div class="toggle-wrap">
            <span class="trigger"><a href="#"><i class="toggle-icon"></i>Test?</a></span>
            <div class="toggle-container">
                <p>Seded ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam. Donec ut volutpat metus. Aliquam tortor lorem, fringilla tempor dignissim at, pretium et arcu.</p>
            </div>
        </div>

        <!-- Toggle 7 -->
        <div class="toggle-wrap">
            <span class="trigger"><a href="#"><i class="toggle-icon"></i> Test? </a></span>
            <div class="toggle-container">
                <p>Seded ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam. Donec ut volutpat metus. Aliquam tortor lorem, fringilla tempor dignissim at, pretium et arcu.</p>
            </div>
        </div>

    </div>

Answer 1

jQuery .toggle() event method was deprecated in jQuery 1.8 and removed in jQuery 1.9. You can use .toggleClass() method instead:

$(".trigger").on('click', function() {
    $(this).toggleClass("active");
});