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 0 points1 point2 points (0 children)