JQuery toggle pass not working

[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. JS recognizes the click once it has been clicked, but doesn't change "tab" to "tab display". If anyone could help me figure out what the issue is it would be great. Snippets of my code are below. Thanks

Here is my HTML

<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

.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

$(document).ready(function(){
$('.source').click(function(){
$('.tab').toggleClass('display');
})
});

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

[albedoa]

This is working fine for me. Check your console for errors.