Problems with Collapse Bootstrap

Question

I have a Collapse Bootstrap inside a while, where it is implemented several times with different information inside. However, when I run the code, when two collapses are together, only one opens. Literally, if I have 4 collapses, no matter which one I click, only one opens with the information.

Here comes the code:

list opposite.php ->

<?php
include ("valida_paginas_adm.php");

?>

  <?php include_once("navbar.php") ?>

  <div class="jumbotron jumbotron-fluid" style="background-image: url(img/fundo.jpg);">

        <div class="container">

            <div class="row">

                <div class="col-sm-12 col-md-12 col-lg-12">

                      <div class="card" style="border: 0;border-radius: 1rem; box-shadow: 0 0.5rem 1rem 0 rgba(0, 0, 0, 0.1);">

                          <div class="card-body lead ml-3">

                              <div class="row">
                                <div class="col-12">
                                    <p class="display-4" style="color:darkred;">Serviços <?php echo $resn ?></p>
                                </div> 
                              </div>

                              <hr>

                              <div class="row">
                                <div class="col-12 mb-4">

                                    <?php  

                                        while ($exibirRegistros = mysqli_fetch_array ($consulta)){
                                            $idProposta = $exibirRegistros[0];
                                            $numero = $exibirRegistros[1];
                                            $servico = $exibirRegistros[2];
                                            $descricao = $exibirRegistros[3];
                                            $data = $exibirRegistros[4];
                                            $valor = $exibirRegistros[5];
                                            $idEmpresa = $exibirRegistros[6];

                                            echo "

                                                <div class='row'>
                                                    <p class='mt-2 ml-3' style='color:darkred;'><strong>
                                                        Serviço: <i>$servico</i> <br>
                                                        Número da Proposta: <i>$numero</i> <br>
                                                        <i>$descricao</i> <br>
                                                        Data: <i>$data</i> | Valor: <i>$valor</i> <br>
                                                    </strong> </p>
                                                </div>


                                                <div class='accordion mb-5'>
                                                    <div class='card'>
                                                        <div class='card-header'>
                                                            <h2 class='mb-0'>
                                                            <button class='btn btn-danger collapsed' type='button' data-toggle='collapse' data-target='#lista02' aria-expanded='false' aria-controls='lista02'>
                                                            Status da Proposta
                                                            </button>
                                                            </h2>
                                                        </div>
                                                        <div id='lista02' class='collapse' aria-labelledby='propostas' data-parent='#listagem'>
                                                        <div class='card-body'>";
                                                            include("listaStatus.php");
                                                        echo "</div>
                                                    </div>
                                                </div>
                                               </div>
                                            ";

                                        }

                                    ?>    

                                </div>
                              </div>

                          </div>
                      </div>
                </div>
            </div>
        </div>
  </div>

  <?php include_once("rodape.php") ?>

listaStatus.php ->

<?php

include_once("conexao.php");

    $sqli = "select * from status where idProposta='$idProposta'";
    $consultar = mysqli_query($conexao,$sqli);

    while ($exibirR = mysqli_fetch_array ($consultar)){
            $idStatus = $exibirR[0];
            $statusProposta = $exibirR[1];
            $data = $exibirR[2];
            $idProposta = $exibirR[3];


        echo "

                <div class='row'>
                    <p class='mt-2' style='color:darkred;'><strong>
                        <i>$statusProposta</i> <br>
                        $data <br>
                    </strong> </p>
                </div>

        ";

            }

?>

Answer 1

You need to create your div ids and data-target and Aria-Controls stats dynamically, example:

<div class="jumbotron jumbotron-fluid" style="background-image: url(img/fundo.jpg);">

<div class="container">

    <div class="row">

        <div class="col-sm-12 col-md-12 col-lg-12">

            <div class="card" style="border: 0;border-radius: 1rem; box-shadow: 0 0.5rem 1rem 0 rgba(0, 0, 0, 0.1);">

                <div class="card-body lead ml-3">

                    <div class="row">
                        <div class="col-12">
                            <p class="display-4" style="color:darkred;">Serviços <?php echo $resn ?></p>
                        </div> 
                    </div>

                    <hr>

                    <div class="row">
                        <div class="col-12 mb-4">

                            <?php
                            $idx = 0;
                            while ($exibirRegistros = mysqli_fetch_array($consulta)) {
                                $idProposta = $exibirRegistros[0];
                                $numero = $exibirRegistros[1];
                                $servico = $exibirRegistros[2];
                                $descricao = $exibirRegistros[3];
                                $data = $exibirRegistros[4];
                                $valor = $exibirRegistros[5];
                                $idEmpresa = $exibirRegistros[6];

                                echo "

                                            <div class='row'>
                                                <p class='mt-2 ml-3' style='color:darkred;'><strong>
                                                    Serviço: <i>$servico</i> <br>
                                                    Número da Proposta: <i>$numero</i> <br>
                                                    <i>$descricao</i> <br>
                                                    Data: <i>$data</i> | Valor: <i>$valor</i> <br>
                                                </strong> </p>
                                            </div>


                                            <div class='accordion mb-5'>
                                                <div class='card'>
                                                    <div class='card-header'>
                                                        <h2 class='mb-0'>
                                                        <button class='btn btn-danger collapsed' type='button' data-toggle='collapse' data-target='#lista02$idx' aria-expanded='false' aria-controls='lista02$idx'>
                                                        Status da Proposta
                                                        </button>
                                                        </h2>
                                                    </div>
                                                    <div id='lista02$idx' class='collapse' aria-labelledby='propostas' data-parent='#listagem'>
                                                    <div class='card-body'>";
                                include("listaStatus.php");
                                echo "</div>
                                                </div>
                                            </div>
                                           </div>
                                        ";
                                $idx++;
                            }
                            ?>    

                        </div>
                    </div>

                </div>
            </div>
        </div>
    </div>
</div>

sorry any error, I’m editing by cell phone

Answer 2

this is probably because the data-target and id are always the same. you’re creating them all with the same id, I believe that’s why. tries to add a variable to change the id and data-target as while creates the Collapse