在Bootstrap Collapse中添加活动类

Question

How to set a panel as active by default on the first load, The code below shows as the dynamic page show help me to solve the issue:

<div class="panel-group collapse-style-1" id="accordion"> 
    <?php  foreach ($careers['result'] as $resclients){?> 
        <div class="panel panel-default">
            <div class="panel-heading">
                <h4 class="panel-title">
                        <a data-toggle="collapse" data-parent="#accordion" href="#collapseOne<?php echo $conn->stripval($resclients['career_id']);?>" aria-expanded="true" class="collapsed">
                            <i class="fa fa-life-ring pr-10"></i><?php echo $conn->stripval($resclients['job_title']);?> - <?php echo $conn->stripval($resclients['experience']);?> 
                        </a>
                    </h4>
            </div><br>
            <div id="collapseOne<?php echo $conn->stripval($resclients['career_id']);?>" class="panel-collapse collapse" aria-expanded="true" style="height: 0px;">
                <div class="panel-body">
                    <?php echo $conn->stripval($resclients['job_desc']);?>
                </div>
            </div>
        </div>
    <?php } ?> 
</div>

Answer 1

try this,

<div class="panel-group collapse-style-1" id="accordion"> 
    <?php $i=1; foreach ($careers['result'] as $resclients){?> 
        <div class="panel panel-default">
            <div class="panel-heading">
                <h4 class="panel-title">
                    <a data-toggle="collapse" data-parent="#accordion" href="#collapseOne<?php echo $conn->stripval($resclients['career_id']);?>" aria-expanded="<?=($i==1)?'true':'false';?>" class="<?=($i==1)?'collapsed':'';?>">
                        <i class="fa fa-life-ring pr-10"></i><?php echo $conn->stripval($resclients['job_title']);?> - <?php echo $conn->stripval($resclients['experience']);?> 
                    </a>
                </h4>
            </div><br>
            <div id="collapseOne<?php echo $conn->stripval($resclients['career_id']);?>" class="panel-collapse collapse <?=($i==1)?'in':'';?>" aria-expanded="<?=($i==1)?'true':'false';?>" style="height: 0px;">
                <div class="panel-body">
                    <?php echo $conn->stripval($resclients['job_desc']);?>
                </div>
            </div>
        </div>
    <?php $i++; } ?> 
</div>