bootstrap accordion data-toggle not working on mobile

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

Ensure that you have included the necessary Bootstrap JavaScript files. The accordion functionality relies on Bootstrap's JavaScript plugins, so make sure that you have included the bootstrap.js or bootstrap.min.js file in your project. You can include it via a CDN or by downloading the file and linking to it in your HTML file.

Answer 2

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