-5

When i click on one accordion button they all expand. i want to expand one accordion's data at a time when i click on it and all other collapsed at the same time.

here is my code

<?php
$i = 1;
$user = $_SESSION['auth_user']['user_id'];
$query = "SELECT * FROM task WHERE user_id = '$user' ORDER BY datetime DESC";

$query_run = mysqli_query($con, $query);
while ($res = mysqli_fetch_array($query_run))
{
?>
                           
                            <div class="accordion" id="accordionExample">
                                <div class="card">
                                    <div class="card-header" id="headingOne">
                                    <h4 class="mb-0">
                                        <button class="btn btn-link btn-block text-left" type="button" data-toggle="collapse" data-target="#collapseOne" aria-expanded="true" aria-controls="collapseOne">
                                        <div class="container">
                                        <div class="row">
                                            <div class="col">
                                            <?php echo $i++ ?>. <?php echo $res['domain']; ?> (<?php echo $res['datetime']; ?>)
                                            </div>
                                            </div>
                                            </div>
                                        </button>
                                    </h4>
                                    
                                    </div>
                                    
                                    <div id="collapseOne" class="collapse" aria-labelledby="headingOne" data-parent="#accordionExample">
                                    <div class="card-body">
                                    


                                    </div>
                                    </div>
                                </div>
                            </div>
                            <?php
}
?>
Your Common Sense
  • 156,878
  • 40
  • 214
  • 345
Gaurav
  • 1
  • 3
  • 1
    `id` attributes _must_ be unique in a document. You have multiple identical `id`s in that code - make them unique (and adjust related other attributes (`data-toggle` ...) accordingly) – brombeer Apr 28 '22 at 09:06
  • dear friend its bootstrap accordion. i copied the html code from there. its not mine. please help if you can. – Gaurav Apr 28 '22 at 09:09
  • 1
    The bootstrap examples _do_ use different IDs. Otherwise, they would not work to begin with. – CBroe Apr 28 '22 at 09:12
  • **Warning:** You are wide open to [SQL Injections](https://php.net/manual/en/security.database.sql-injection.php) and should use parameterized **prepared statements** instead of manually building your queries. They are provided by [PDO](https://php.net/manual/pdo.prepared-statements.php) or by [MySQLi](https://php.net/manual/mysqli.quickstart.prepared-statements.php). Never trust any kind of input! Even when your queries are executed only by trusted users, [you are still in risk of corrupting your data](http://bobby-tables.com/). [Escaping is not enough!](https://stackoverflow.com/q/32391315) – Dharman Apr 28 '22 at 09:18
  • fyi, `
    ` is not allowed inside `
     – brombeer Apr 28 '22 at 09:43
  • @brombeer please solve the problem which i'm facing. i will manage the designing and structural part. my problem is all accordions expanding and collapsing at the same time when i click on accordion button. – Gaurav Apr 28 '22 at 09:47
  • The answer by Ejaaz Khan looks ok to me, it should work and solve your problem. "_i will manage the designing and structural part_" You do that, I just informed you that your structural part is invalid – brombeer Apr 28 '22 at 09:57
  • @brombeer it is not working. still all are expanding and collapsing at the same time. – Gaurav Apr 28 '22 at 09:58
  • I don't see how that would happen since all `id` attributes are unique and references are updated. Do some debugging on your own, inspect the elements and make sure that they actually are unique (`collapseOne1`, `collapseOne2` etc) and their references are correct. Good luck – brombeer Apr 28 '22 at 10:01
  • @brombeer i'm fetching data inside one accordion so its already unique one. you can see my code. thankyou for your efforts – Gaurav Apr 28 '22 at 10:05

2 Answers2

0

You need to use something unique in your accordion id E.G.


<div class="accordion" id="accordionExample">
    <?php
        $i = 1;
        $user = $_SESSION['auth_user']['user_id'];
        $query = "SELECT * FROM task WHERE user_id = '$user' ORDER BY datetime DESC";

        $query_run = mysqli_query($con, $query);
        while ($res = mysqli_fetch_array($query_run))
    {
    ?>
    <div class="card">
        <div class="card-header" id="headingOne<?php echo $i ?>">
            <h4 class="mb-0">
                <button class="btn btn-link btn-block text-left" type="button" data-toggle="collapse" data-target="#collapseOne<?php echo $i ?>" aria-expanded="true" aria-controls="collapseOne<?php echo $i ?>">
                <div class="container">
                    <div class="row">
                        <div class="col">
                            <?php echo $i ?>. <?php echo $res['domain']; ?> (<?php echo $res['datetime']; ?>)
                        </div>
                    </div>
                </div>
                </button>
            </h4>
        
        </div>
        
        <div id="collapseOne<?php echo $i ?>" class="collapse" aria-labelledby="headingOne<?php echo $i ?>" data-parent="#accordionExample">
            <div class="card-body">
            


            </div>
        </div>
    </div>
    <?php $i++; } ?>
</div>
Ejaaz Khan
  • 38
  • 7
0

You are creating .accordion class with same id #accordionExample for every iteration. This is why they are not working as they should be. Considering your PHP code is working fine and $i is incrementing as it should be, the following code should work. Just FYI, notice the data-parent attribute, if you set that to the unique id of the accordion, it will only open a single accordion at a time, so you can remove that if you want the ability to have all of them open at once.

<?php
$i = 1;
$user = $_SESSION['auth_user']['user_id'];
$query = "SELECT * FROM task WHERE user_id = '$user' ORDER BY datetime DESC";
echo '<div class="accordion" id="uniqueAccordionId">';
$query_run = mysqli_query($con, $query);
while ($res = mysqli_fetch_array($query_run))
{ ?>
 <div class="card">
    <div class="card-header" id="heading<?php echo $i; ?>" data-toggle="collapse" data-target="#collapse<?php echo $i; ?>" aria-expanded="true" aria-controls="collapse<?php echo $i; ?>">
      Some Text
    </div>
    <div id="collapse<?php echo $i; ?>" class="collapse" aria-labelledby="heading<?php echo $i; ?>" data-parent="#uniqueAccordionId">
      <div class="card-body">
        Collapse Body Text
      </div>
    </div>
</div>
<?php } echo '</div>'; $i++; ?>
Osama Khawar
  • 74
  • 1
  • 6