Why isn't my Bootstrap accordion working properly?

Question

I'm building a site with Bootstrap 4, and I have 3 <div> that contain an accordion each. Each <div> has it's own id , that way I can show/hide the one I want. I'm having issues with the opening and collapsing of some parts of all accordions (when I open one, the other won't close. Others simply won't open at all).

My code here . (Click through the "Sobre Paygol", "Vendedores" and "Compradores" buttons).

I can't pin an error in my code. The only thing that seems odd is that when I open the console, I get the following error:

popper.min.js.map:1 Uncaught SyntaxError: Unexpected token ':'

Since I haven't got JS knowledge, I don't know if this could be causing the problem. I've always used Bootstrap 4 and this is the first time I see this error.

My scripts are loaded as such:

<script src="js/popper.min.js"></script>
<script src="js/popper.min.js.map"></script>
<script src="js/jquery.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" 
integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" 
crossorigin="anonymous"></script>

Please note that on the second line I've added the popper.min.js.map file I downloaded from Github.

Answer 1

It looks like the error is in the popper.min.js.map according to the developer tab in Chrome.

So remove the following line from popper.min.js . It all the way at the bottom. You can delete the map file after.

//# sourceMappingURL=popper.min.js.map

Answer 2

I don't think your problems have anything to do with the source map error. You have multiple errors on your HTML:

1. Wrong parent ID
2. Extra .hide class that prevents collapsible from showing
3. Multiple elements with same ID, eg, #accordion

On page http://18.230.62.117/support.html#faqAboutPaygol , you have the wrong parent IDs in your HTML.

<div id="accordionQuestions" class="accordion-faq">
    <div class="card">
        <div class="card-header" id="headingQuestionOne">
            <h5 class="mb-0">
                <button class="btn btn-link" data-toggle="collapse" 
                    data-target="#collapseQuestionOne" aria-expanded="true" 
                    aria-controls="collapseQuestionOne">
                      ¿Qué es Paygol?
                </button>
            </h5>
        </div>
        <div id="collapseQuestionOne" class="collapse show" 
            aria-labelledby="headingQuestionOne" data-parent="#accordion" style="">
            <div class="card-body">
                Paygol es una plataforma de pago en línea que permite a vendedores 
                recibir pagos a través de una amplia variedad de métodos de pago de 
                una manera rápida y fácil.
            </div>
        </div>
    </div>
    <div class="card" />
    <div class="card" />
</div>

See your accordion's id is "accordionQuestions", but your data-parent="#accordion" .

On page http://18.230.62.117/support.html#faqVendedores , you have an extra .hide class on the first collapsible:

<div id="accordion" class="accordion-faq">
    <div class="card">
        <div class="card-header" id="headingQuestionOne">
            <h5 class="mb-0" />
        </div>    
        <div id="collapseQuestionOne" class="hide collapse">
            <div class="card-body" />
        </div>
    </div>
    <div class="card" />
    ...
</div>

That's why the first collapsible won't be opened even you click on it.

This is happening again on page http://18.230.62.117/support.html#faqCompradores .

Also please note since you're doing single page application, you can't have multiple elements with the same ID, eg, <div id="#accordion /> . This screwed up the accordion plugin.