jQuery Toggle not working properly with newer jQuery version

jQuery Toggle not working properly with newer jQuery version

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?

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>