简体   繁体   中英

Bootstrap Accordion with PHP script not working properly

I have written a php script which uses Bootstrap Accordion. My Problem is as follows:- Data is displayed correctly in the accordion for all records but when i click on respective accordion..none of them pop-open n close except the accordion of the very first record displayed ie only the first accordion is working perfectly fine but for rest of the records, accordion displays correct data but does not pop-open n close at all. Please help if anyone can Here is the code which i have written

            <div class="row">
                <?php while ($row = mysql_fetch_assoc($sql_result)) { ?>
                    <div class="col-sm-6">
                        <div class="card" style="width: 25rem;">
                            <h3 class="card-header card-warning text-center"><?php echo $row['dlocation'] ?></h3>
                            <img class="card-img-top img-fluid" src="<?php echo $row['dimage'] ?>" alt="Card image cap">

                            <!--ACCORDION START-->
                                <div id="accordion" role="tablist" aria-multiselectable="true">
                                  <div class="card">
                                    <div class="card-header" role="tab" id="headingOne">
                                      <h5 class="mb-0">
                                        <a data-toggle="collapse" data-parent="#accordion" href="#collapseOne" aria-expanded="true" aria-controls="collapseOne">
                                          Image Description
                                        </a>
                                      </h5>
                                    </div>

                                    <div id="collapseOne" class="collapse show" role="tabpanel" aria-labelledby="headingOne">
                                      <div class="card-block">
                                        <?php echo $row['dimagedescription'] ?>
                                      </div>
                                    </div>
                                  </div>
                                  <div class="card">
                                    <div class="card-header" role="tab" id="headingTwo">
                                      <h5 class="mb-0">
                                        <a class="collapsed" data-toggle="collapse" data-parent="#accordion" href="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo">
                                          Software Used
                                        </a>
                                      </h5>
                                    </div>
                                    <div id="collapseTwo" class="collapse" role="tabpanel" aria-labelledby="headingTwo">
                                      <div class="card-block">
                                        <p class="card-text"><?php echo $row['dsoftwareused'] ?></p>
                                      </div>
                                    </div>
                                  </div>
                                </div>
                                <!--ACCORDION END-->


                            <div class="card-block ">                   
                                <div class="alert alert-danger" role="alert">
                                    <p class="card-text"><?php echo $row['dimagedescription'] ?></p>
                                    <p class="card-text"><?php echo $row['dsoftwareused'] ?></p>
                                </div>
                                <h4><span class="badge badge-default">Designer Information</span></h4>
                                <h5 class="card-title"><?php echo $row['dname'] ?></h5>
                                <h6 class="card-subtitle mb-2 text-muted"><?php echo ($row['dcity'])?></h6>
                                <h6 class="card-subtitle mb-2 text-muted"><?php echo ($row['dmobile'])?></h6>
                                <h6 class="card-subtitle mb-2 text-muted"><a href="<?php echo ($row['dwebsite'])?>"><?php echo ($row['dwebsite'])?></a></h6>
                                <h6 class="card-subtitle mb-2 text-muted"><a href="mailto:<?php echo ($row['demail'])?>" target="_top"><?php echo ($row['demail'])?></a></h6>
                            </div>
                            <div class="card-footer">
                                <small class="text-muted">Design ID:- <?php echo stripcslashes($row['did']) ?> Submitted on :-<?php echo stripcslashes($row['dsubmissiondate']) ?></small>
                                <br>
                            </div>
                        </div>
                    </div>
                <?php } ?>
            </div>

My Problem has been solved by assigning unique Accordion ID for each record in the PHP array generated . Thank You.

The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM