bootstrap accordion data-toggle not working on mobile - html

Question

I found that somebody else asked the same question and received no answer. I am using Bootstraps data-toggle for an accordion and it is not working on mobile (not just IOS but it's not working on chrome developer tools or my Galaxy S8).
<!-- How it Works -->
<div id="howItWorks" class="interiorContent">
<div class="container">
<div class="intContHead">
<h2>How it Works</h2>
</div>
<div class="accordion" id="howItWorksAccordion">
<div class="card">
<div class="card-header" id="headingOne">
<h6 class="mb-0">
<a role="button" data-toggle="collapse" data-parent="#howItWorksAccordion" data-target="#collapseOne" href="#collapseOne" aria-expanded="true" aria-controls="collapseOne">
Step 1: Create ASComm.NET Configuration File
</a>
</h6>
</div>
<div id="collapseOne" class="collapse show" aria-labelledby="headingOne" data-parent="#howItWorksAccordion">
<div class="card-body">
<p>For more advanced applications (branded, database, etc.), you can build your own configuration
application that utilizes ASComm.NET's configuration and serialization capabilities.</p>
</div>
</div>
</div>
<div class="card">
<div class="card-header" id="headingTwo">
<h6 class="mb-0">
<a class="collapsed" role="button" data-toggle="collapse" data-parent="#howItWorksAccordion" href="#collapseTwo" aria-expanded="false"
aria-controls="collapseTwo">
Step 2: Add ASComm Excel Add-in to Excel.
</a>
</h6>
</div>
<div id="collapseTwo" class="collapse" aria-labelledby="headingTwo" data-parent="#howItWorksAccordion">
<div class="card-body">
<p>
<strong>NOTE: Step 2 only needs to be perfomed once. If you have already added ASComm.NET Excel Add-in
to Excel, proceed to Step 3.</strong>
</p>
</div>
</div>
</div>
<div class="card">
<div class="card-header" id="headingThree">
<h6 class="mb-0">
<a class="collapsed" role="button" data-toggle="collapse" data-parent="#howItWorksAccordion" href="#collapseThree" aria-expanded="false"
aria-controls="collapseThree">
Step 3: Configure ASComm.NET Excel Add-in Operating Parameters
</a>
</h6>
</div>
<div id="collapseThree" class="collapse" aria-labelledby="headingThree" data-parent="#howItWorksAccordion">
<div class="card-body">
<p>3.1 Locate the ASComm.NET tab on the Excel ribbon</p>
</div>
</div>
</div>
<div class="card">
<div class="card-header" id="headingFour">
<h6 class="mb-0">
<a class="collapsed" role="button" data-toggle="collapse" data-parent="#howItWorksAccordion" href="#collapseFour" aria-expanded="false"
aria-controls="collapseFour">
How to Read and Log Data
</a>
</h6>
</div>
<div id="collapseFour" class="collapse" aria-labelledby="headingFour" data-parent="#howItWorksAccordion">
<div class="card-body">
<img alt="Excel AddIn Ribbon" class="img-responsive" src="../../../images/ascomm_excel_addin_ribbon.png">
</div>
</div>
</div>
<div class="card">
<div class="card-header" id="headingFive">
<h6 class="mb-0">
<a class="collapsed" role="button" data-toggle="collapse" data-parent="#howItWorksAccordion" href="#collapseFive" aria-expanded="false"
aria-controls="collapseFive">
How to Write Data
</a>
</h6>
</div>
<div id="collapseFive" class="collapse" aria-labelledby="headingFive" data-parent="#howItWorksAccordion">
<div class="card-body">
<!--Manual Start-->
<p>ASComm Excel Add-in can read data from hardware devices and populate Excel spreadsheets without
writing any code.</p>
</div>
</div>
</div>
</div>
</div>
</div>
I tried adding curser: pointer to my a tags and I tried changing the a tags to button tags. I watched the elements in chrome developer tools as I clicked on the links - the first card changes from class="collapse show" to class="collapsing" to class="collapse" yet nothing happens. (The first card is supposed to be shown upon page visit).

Answer 1

Pasted your code in a ongoing project file...uploaded on web server...EVERYTHING WORKED FINE... Tested on Chrome Mobile Browser... version 68.0 ...
Versions I was using (If it helps):
Bootstrap 4.1.2
JQuery 3.3.1
Popper.js 1.14.3