Bootstrap手风琴扩展全部

Question

I have created an accordion from my database table where each row is a new card, the first column is the heading by which it expands and the remaining columns are the content of the collapsible part.

This works perfectly as expected, but was wondering if there is a way to try get a button outside of this that will expand them all?

$i = '0';

$var = '<div id="accordion">';

$sql = "SELECT * FROM table";
$stmt = DB::run($sql);
while ($row = $stmt->fetch(PDO::FETCH_ASSOC)){

    $col1 = $row['col1'];
    $col2 = $row['col2'];
    $col3 = $row['col3'];
    $col4 = $row['col4'];

    $i++;

    $var .= '<div class="card">';

        $var .= '<div class="card-header" id="heading'.$i.'">';
            $var .= '<button class="btn btn-link" data-toggle="collapse" data-target="#collapse'.$i.'" aria-expanded="true" aria-controls="collapse'.$i.'">';
                $var .= $col1;
            $var .= '</button>';
        $var .= '</div>';

        $var .= '<div id="collapse'.$i.'" class="collapse" aria-labelledby="heading'.$i.'" data-parent="#accordion">';
            $var .= '<div class="card-body">';
                $var .= $col2;
                $var .= $col3;
                $var .= $col4;
            $var .= '</div>';
        $var .= '</div>';

    $var .= '</div>';
}

$var .= '</div>';

Answer 1

This is what worked for me in the end:

function expand_all(){
    $('.collapse').each(function(){
        $(this).addClass('show');
    });
    $('.accordion-btn').each(function(){
        $(this).attr('aria-expanded','true');
    });
}
function collapse_all(){
    $('.collapse').each(function(){
        $(this).removeClass('show');
    });
    $('.accordion-btn').each(function(){
        $(this).attr('aria-expanded','false');
    });
}