I'm encountering an issue with my website's homepage. I have a list of services displayed, and the intention is for a description to appear when one of the services is clicked. However, clicking on the buttons does not trigger the expected action, and I'm unsure of the reason behind this. The JavaScript function used for this functionality is similar to what I've successfully implemented for the menu button.
I don't consider myself proficient in coding and still classify myself as a beginner. Any assistance regarding this matter would be greatly appreciated!
$(document).ready(function() {
$('.video-btn').click(function() {
$('description-video').toggleClass('active');
})
$('.animation-btn').click(function() {
$('description-animation').toggleClass('active');
})
}).description {
width: 600px;
font-size: 1.4em;
line-height: 1.2em;
font-weight: 400;
color: #f4f4f4;
padding-left: 1em;
border-left: 4px solid #e0bd8c;
}
#description-video,
#description-animation {
display: none;
}
#description-video.active,
#description-animation.active {
display: inherit;
}<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul class="service-list">
<li id="video-btn"><a href="#">Video</a></li>
<li id="animation-btn"><a href="#">Animation</a></li>
</ul>
<p class="description" id="description-video">
Text goes here...
</p>
<p class="description" id="description-animation">
Text goes here...
</p>