As the title of this thread suggests, I’m trying to toggle a class on a div using data attributes on the link.
I’ve added my basic html and js. I’ve gotten it to toggle the class, but I need it to toggle a different class depending on which link is hovered.
I’ve added my HTML and javascript below. If anyone can help me fill in the blanks, I would be extremely grateful.
var switchData = $("[data-switch]");
var breakoutClass = switchData.attr('data-switch');
$('.js-breakout-switch').hover(function() {
$(this).parents('.js-product-breakout').toggleClass('show-' + breakoutClass);
});
<div class="product-breakout js-product-breakout">
<section class="breakout-item">
<p class="breakout-item-text"><a class="breakout-item-link color-white js-breakout-switch" data-switch="01" href="">View Part</a></p>
</section>
<section class="breakout-item">
<p class="breakout-item-text"><a class="breakout-item-link color-white js-breakout-switch" data-switch="02" href="">View Part</a></p>
</section>
<section class="breakout-item">
<p class="breakout-item-text"><a class="breakout-item-link color-white js-breakout-switch" data-switch="03" href="">View Part</a></p>
</section>
</div>