In my desktop version, I have implemented some code that enables hovering over a button to display additional information or text. How can I modify this for mobile so that nothing happens when the button is tapped on?
.credit:hover .credit-text,
.credit-ba:hover .credit-text {
display: block;
}
Instead of the hover effect, I would like to use JavaScript to make the icon clickable - toggling between hiding and showing the content upon clicking the icon. The issue with the hover click on mobile devices is that users have difficulty closing the tab by clicking around the screen instead of the button/icon itself.
.hideElement {
display: none;
}
Below is the JavaScript code:
const creditIcon = document.querySelector('.credit-icon');
const creditText = document.querySelector('.credit-text');
let creditOpen = false;
creditIcon.addEventListener('click', () => {
creditText.style.display = "block";
creditOpen = processMenu.classList.contains('hideElement')
})
The corresponding HTML code:
<div class="credit black-text">
<button class="credit-icon"> (...)
</button>
<div class="credit-text hideElement">
<p>
Thank you
to my team of helpers
<br><br>
and the following
<br><br>
Collaborators<br>
Handmade Staples Details produced by Mary Chan
<br>Knitwear produced by Elaine Lip
<br>Shoes Handcrafted by Doyeon Ji
<br>Soundtrack composed by Zacharias Wolfe
<br><br>
Look Book
<br>Photographed by Dean Hoy
<br>Make Up by Ana Takahashi
<br><br>
Show
<br>Hair by L’Oréal Professionnel
<br>Make Up by MAC Cosmetics
Supported by ThreeUK
<br><br>
Models
<br>Jina Yoo
<br>Aaron Wong
<br>Reign Charbit
<br>Karen Reichelt
<br>Harrison Chan
<br>Jessica Chen
<br>Kristianna Peel
<br>Trinity Mcintosh
<br><br>
Special thanks to Lane Crawford
<br>
and the MAFCSM team</p>
</div>
</div>