My simple accordion features a functionality where a class of .open is added to the title + content group when you open a panel for styling purposes. Everything works smoothly, but I've noticed on my phone that after clicking to close a panel, the hover styling (which matches the active/open styling) remains. This inconsistency is especially evident due to the plus/minus icon usage. Clicking elsewhere on the page removes this lingering styling. Since there is no :focus styling, could it be that the :hover action is being interpreted as a touch event? Any suggestions on how I can address this issue?
Below is the script I am using:
$(document).ready(function($) {
// Add class of `.open` to first `.accordion__title` since it's set to `display: block` in CSS.
$('.accordion__item:first-child .accordion__title').addClass('open');
// Accordion functions.
$('.accordion').find('.accordion__title').click(function(){
// Add class to title.
$(this).toggleClass('open');
// Expand or collapse this panel.
$(this).next().slideToggle('fast');
});
});
The HTML markup for the accordion:
<div class="accordion">
<div class="accordion__item">
<h2 class="accordion__title">Question One <span class="accordion__title-icon"></span></h2>
<div class="accordion__copy">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
</div>
</div>
<div class="accordion__item">
<h2 class="accordion__title">Question Two <span class="accordion__title-icon"></span></h2>
<div class="accordion__copy">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div>
</div>
<div class="accordion__item">
<h2 class="accordion__title">Question Three <span class="accordion__title-icon"></span></h2>
<div class="accordion__copy">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.</p>
</div>
</div>
</div>
You can also view a demonstration on CodePen: https://codepen.io/moy/pen/aENWXz
If you inspect the same effect on Chrome using any mobile device through Browser Tools, you'll notice the issue.