How to click link open corresponding panel

Question

By clicking on a link at the bottom of my page I’m trying to open the corresponding panel that points to a specific page, but I’m not getting it, I saw an example here but I couldn’t adapt.

The following image illustrates my question:

The code of the page containing the panels is like this:

<div id="collapse2" class="panel-collapse collapse" role="tabpanel" aria-labelledby="heading2">
                        <div class="panel-body">
                            Disponibilidade de Entrega:<br><br>                             
                            As peças adquiridas estarão disponíveis para entrega de acordo com as quantidades mencionadas em estoque. Com entrega prevista entre 1-8 dias úteis (SEDEX) ou 4-24 dias úteis (PAC), após confirmação do pagamento. O prazo de entrega depende do seu CEP e é calculado automaticamente no seu carrinho de compras.<br><br>

                            Segurança ao comprar pela internet:<br><br>
                            Os pagamentos são feitos através do sistema PAGSEGURO da UOL. Suas informações ficam protegidas e seguras. Os pagamentos no cartão passam por uma análise anti-fraude para proteger a loja e o cliente.<br><br>

                            Diferenças nas características do produto:<br><br>
                            As fotos do site são ilustrativas, podendo haver variação em relação à cor original.<br><br>

                            Fique por dentro das novidades:<br><br>
                            Você fica por dentro das novidades RendaMais Lingerie curtindo a nossa página no Facebook, e seguindo nosso Instagram! Faça também o seu cadastro no site para receber promoções e novidades.<br><br>
                        </div>
                    </div>
                </div>
                <!---->
                <div class="panel panel-default">
                    <div class="panel-heading" role="tab" id="heading3">
                        <h4 class="panel-title">
                            <a class="collapsed" data-toggle="collapse" data-parent="#accordion" href="#collapse3" aria-expanded="false" aria-controls="collapse3">
                                <span class="dot"></span> Política de Pagamento
                            </a>
                        </h4>
                    </div>
                    <div id="collapse3" class="panel-collapse collapse" role="tabpanel" aria-labelledby="heading3">
                        <div class="panel-body">
                            Formas de pagamento aceitas:<br>
                            1. Pagseguro: Cartão de Crédito: VISA, Mastercard, Elo, American Express, Hipercard, Hiper, Rede Shop (até 3x sem juros) <br>
                            2. Transferência Bancária (DOC OU TED): Sicredi Agroempresarial PR/SP (à vista)<br>
                            3. Depósito em Conta: Sicredi Agroempresarial PR/SP (à vista).<br><br>

                            Prazo para Confirmação do Pagamento:<br>
                            1.Pagamentos no cartão de crédito são confirmados geralmente em 1 dia útil.<br>
                            2. Transferências bancárias e Depósitos são confirmadas geralmente em 1 dia útil.<br>
                            Dicas para garantir a agilidade na entrega do seu pedido.<br>
                            1. Pagamentos com cartão de crédito: na tela de pagamento informe corretamente todos os dados do titular do cartão de crédito. Caso algum dado esteja incorreto o pagamento poderá passar por uma análise de até 48h, o que poderá aumentar o prazo de entrega do seu pedido.<br>
                            2. Pagamento por depósito em conta ou Transferência bancária (DOC OU TED): após efetuar o depósito nos informe por WhatsApp [phone] ou pelo e-mail [email protected] o número do seu pedido, o valor depositado e a data e horário do depósito.<br>                                
                        </div>
                    </div>
                </div>

In the footer I tried to do that:

                    <div class="col-md-3">
                    <div class="widget widget-categories">
                        <h4 class="widget-title">INFORMAÇÕES</h4>
                        <ul>
                            <li><a href="empresa.php">Sobre Nós</a></li>
                            <li><a href="faq.php#collapse2">Como Comprar</a></li>
                            <li><a href="faq.php#collapse3">Política de Pagamento</a></li>
                            <li><a href="faq.php#collapse4">Política de Entrega</a></li>
                            <li><a href="faq.php#collapse5">Trocas e Devoluções</a></li>
                        </ul>
                    </div>
                </div> 

The script looks like this:

        $(function(){

    // check if there is a hash in the url
    if ( window.location.hash != '' )
    {
        // remove any accordion panels that are showing (they have a class of 'in')
        $('.collapse').removeClass('in');

        // show the panel based on the hash now:
        $(window.location.hash + '.collapse').collapse('show');
    }

    });

But when I’m in faq.php doesn’t work, how can I do that?

Answer 1

To leave the collapse of bootstrap actuated, the class in must be involved in div of the element.

You can just do it like this:

      $(function(){

    // check if there is a hash in the url
    if ( window.location.hash != '' )
    {
        // remove any accordion panels that are showing (they have a class of 'in')
        $('.collapse').removeClass('in');

        // show the panel based on the hash now:
        $(window.location.hash).addClass('in'); /*irá adicionar a classe 
no elemento com o id correspondente*/
    }

    });