Trying to figure out a way to hide the footer when a specific container is active:
For example, how can I hide the footer when the second and third items are selected as active?
<div class="owl-stage">
<div class="owl-item"></div>
<div class="owl-item active"></div>
<div class="owl-item"></div>
</div>
<footer>
<select id="select" style="display:block"></select>
</footer>
I initially considered using CSS, but I'm not sure if that will work:
.owl-stage:nth-of-type(2).owl-item.active footer select,
.owl-stage:nth-of-type(3).owl-item.active footer select {
display: none;
}
My idea was:
$(".owl-stage:nth-of-type(2) .owl-item.active").?????('footer #select').css("display", "none");
Any suggestions on how I can achieve this with some JavaScript?
Thank you, Barry