I have been attempting to toggle the class of the first child of a selected column within a row. Here is the HTML code snippet:
<div class="container row each-expertise">
<div class="col l4 m4 skill-1">
<div class="circle">
<i class="material-icons">phonelink_setup</i>
</div>
<h5>Software Development</h5>
<p class="lead sotenue">If you have a problem to solve or an incredible idea to digitally showcase, I can assist you in expressing it through a Web, Mobile, or Desktop application. </p>
<br class="show-on-med">
</div>
<div class="col l4 m4 skill-2">
<div class="circle">
<i class="material-icons">web</i>
</div>
<h5>Web Design and Redesign</h5>
<p class="lead sotenue">If you need people to be informed about what you do, having a website is crucial. You may also require a redesign if you desire more out of your existing site. </p>
</div>
<div class="col l4 m4 skill-3">
<div class="circle">
<i class="material-icons">airplay</i>
</div>
<h5>I.T | Tech Evangelism</h5>
<p class="lead sotenue">I enjoy inspiring, motivating, educating, and uniting developers and I.T professionals to exchange ideas, skills, solutions, and experiences. </p>
</div>
</div>
Additionally, here is the JavaScript code provided:
$(document).ready(function() {
$myskill = $("#expertise .each-expertise .col");
$myskill.hover(function(){
$(this).toggleClass("white indigo-text text-darken-2");
$(this).siblings().find('.circle').toggleClass('circle').toggleClass('circled');
});
});
However, despite these efforts, the code does not appear to be functioning as intended.