Try with this media query

@media not all and (pointer: coarse) {
.credit:hover .credit-text,
  .credit-ba:hover .credit-text {
     display: block;
  }
 }

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')
   })

@media not all and (pointer: coarse) {
.credit:hover .credit-text,
  .credit-ba:hover .credit-text {
     display: block;
  }
 }
  
  .hideElement {
         display: none;
      }

<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>

In my desktop version, I have some code that allows you to hover over a button to reveal some info/text. How do I reset this in mobile to not do anything at all when tapped on.

.credit:hover .credit-text,
  .credit-ba:hover .credit-text {
     display: block;
  }

Instead I wanted to write a JS rule on the the icon to make it clickable – so toggle hide and showing on clicking icon. The issue with the hover click on phone is that, the user has to click around the screen to close the open tab, instead of clicking the button/icon again.

.hideElement {
         display: none;
      }

Here is JS

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')
   })

HTML

<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>