Custom code for Collapse (v2023)

PHPMaker General Discussion (PHPMaker)
1

I copied collapse code from Bootstrap5 docs, and paste it in to the dashboard custom template for my requirement. i don’t know why that is not working. Can you please help me out to fix this issue.
Thanks!

2

You better post your code for discussion.

3 
<div class="main mt-5">
    <fieldset>
    
    <div class="search-container">
    <label for="fin_year" style="font-size: 13px;"> Financial Year</label>
    &nbsp;
        <select class='form-control ew-basic-search-keyword' name='fin_year' id='fin_year'
        placeholder='Financial Year' required>
            <option value="">Please Select</option>
            <option value="2023-2024">2023-2024</option>
        </select>&nbsp;&nbsp;&nbsp;&nbsp;
        <label for="fin_quat" style = 'font-size: 13px;'> Financial Quarter
        </label>&nbsp;
        <select class='form-control ew-basic-search-keyword' name='fin_quat' id='fin_quat'
        placeholder='Financial Quarter' required multiple="multiple">
            <option value="Q1">Q1</option>
            <option value="Q2">Q2</option>
            <option value="Q3">Q3</option>
            <option value="Q4">Q4</option>
        </select>&nbsp;&nbsp;&nbsp;&nbsp;
        <label for="prj_id" style = 'font-size: 13px;'> Project ID <span style="color: red;">*</span></label>&nbsp;
        <select class='form-control ew-basic-search-keyword' name='prj_id' id='prj_id' placeholder='Project ID' multiple="multiple">
        </select>&nbsp;&nbsp;&nbsp;&nbsp;
        <label for="fy_del_list_id" style = 'font-size: 13px;'> Delivery List
        </label>&nbsp;
        <select class='form-control ew-basic-search-keyword' name='fy_del_list_id' id='fy_del_list_id' placeholder='Delivery Date' multiple="multiple">
            <?php
                $delivery_date_list = ExecuteRows("SELECT projectIdx FROM pp_fy_projects");
                if(count($delivery_date_list) != 0){
                    foreach($delivery_date_list as $fy_del_date){
                        $fy_del_date_val = $fy_del_date['projectIdx'];
                        $del_list_val = ExecuteScalar("SELECT PROJID FROM projlist WHERE ID = '$fy_del_date_val'");
                        if(strlen($del_list_val) != 0){
                            echo "<option value=$del_list_val>$del_list_val</option>";
                        }
                    }
                }
            ?>
        </select>&nbsp;&nbsp;&nbsp;&nbsp;
        <button class="btn btn-info" name="btn-search" data-caption="Search" data-bs-original-title="Search" id="btn-search" type="submit">
        <i class="fa fa-search"></i></button>
        <button class="btn btn-primary" name="btn-home" id="btn-home" type="submit">
        <i class="fa fa-home"></i></button>
        <button class="btn btn-warning" name="btn-graph" id="btn-graph" type="submit">
        <i class="fa fa-line-chart"></i></button>
        <button class="btn btn-danger" name="btn-reset" id="btn-reset" type="submit">
        <i class="fa fa-refresh"></i></button>
    </div>
    </fieldset>

    <p>
  <button class="btn btn-primary" type="button" data-bs-toggle="collapse" data-target="#collapseWidthExample" aria-expanded="false" aria-controls="collapseWidthExample">
    Toggle width collapse
  </button>
</p>
<div style="min-height: 120px;">
  <div class="collapse width" id="collapseWidthExample">
    <div class="card card-body" style="width: 320px;">
      This is some placeholder content for a horizontal collapse. It's hidden by default and shown when triggered.
    </div>
  </div>
</div>
4

You have wrong data-* attribute, see Bootstrap’s example and compare it with your code.

5

Sorry i corrected that now it’s working fine.
Thanks!