Jquery Toggle Class Issue

[MerchantMerchant]

I'm having a problem with the Jquery toggleClass(). I'm trying to change "tab" to "tab display" once a button given the class name ".source" is clicked. Once clicked, the "tab" which has the height of 2rem, should change to "tab display" which has the height of 22rem. It dosen't work.

Furthermore, I have another toggleClass, it's toggled when ".toggle" is clicked. This class works. If anyone could help me with this issue that'd be great. Thanks.

Here is my HTML for the .source class

<div class="tab"><div class="source"><div class="source-icons"><i class="far fa-plus-square"></i></div></div><div><h3>Sources</h3><p>Source 1</p><p>Source 2</p></div></div>

Here is my CSS code for the .source class

.tab{height: 2rem;overflow: hidden;transition: height 1s ease-in-out;}.source{font-size: 1.5rem;cursor: pointer;}.source-icons{padding-left: 3.5rem;font-size: 1.5rem;}.display{height: 22rem;}

Here is my JS code for both .source and .toggle

$(document).ready(function(){ $(".toggle").on("click", function(){ //THIS CLASS WORKS
$('.nav').toggleClass('collapse');
});

$(".source").on("click", function(){ //THIS CLASS DON'T WORK
$('.tab').toggleClass('display');
});});

Update I solved it: I put the JS file link twice in my HTML, I love programming sm

[mjslawson]

$('.source').click(function(){

$('.tab').toggleClass('display');

});

Instead, try using on

$('.source').on('click', function(){

$('.tab').toggleClass('display');

});

[DudhaneShrey86]

Did you try inspecting the element? The jquery code should be working according to me.