Snippet. PHP. Html Collapsible Panel

Introduction

This is a PHP function producing a nice collapsible HTML panel. The function is completely autonomous integrating the required JavaScript and images.

Snippet

//======================== START OF FUNCTION ==========================//
// FUNCTION: html_collapsible_panel                                    //
//=====================================================================//
function html_collapsible_panel($options){
    $id = isset($options['id'])?$options['id']:utils::str_random(10,'abcdefghijklmnopqrstuvxyz');
    $title = isset($options['title'])?$options['title']:'';
    $body = isset($options['html'])?$options['html']:'';
    $is_collapsible = isset($options['collapsible'])?$options['collapsible']:true;
    $is_collapsed = isset($options['collapsed'])?$options['collapsed']:false;
    $minus = 'data:image/gif;base64,R0lGODlhCgAKAJEAAAAAAP///////wAAACH5BAEAAAIALAAAAAAKAAoAAAIXlI+guwIBYwBORvrsrOxhvWXWp2FdUwAAOw%3D%3D';
    $plus = 'data:image/gif;base64,R0lGODlhCgAKAJEAAAAAAP///////wAAACH5BAEAAAIALAAAAAAKAAoAAAIYlI+guwIBYwAuPkjvtJW9bHHaWEmY4zUFADs%3D';

    $collapse = $is_collapsible==true?'var e = document.getElementById(\''.$id.'_body\'); if(e.style.display==\'block\'){e.style.display=\'none\';}else{e.style.display=\'block\';}if(this.src==\''.$minus.'\'){this.src=\''.$plus.'\';}else{this.src=\''.$minus.'\';}':'';
	
    $collapsed_image = '<img src="'.$plus.'" onclick="'.$collapse.'" alt="" />';
    $noncollapsed_image = '<img src="'.$minus.'" onclick="'.$collapse.'" alt="" />';
	
    $html = '<table id="'.$id.'" align="left" width="100%" cellspacing="0" cellpadding="4" style="border:1px solid #7E9DB9;margin-bottom:10px;">';
    if($title != ''){
        $img = $is_collapsed==true ? $collapsed_image:$noncollapsed_image;
	$html .= '<tr>';
	$html .= '<td style="background:#D7E3F2;border-bottom:1px solid #7E9DB9;">'.$img.' '.$title.'</td>';
	$html .= '</tr>';
    }
	
    $display = $is_collapsed?'none':'block';
    
    $html .= '<tr id="'.$id.'_body" style="display:'.$display.';">';
    $html .= '<td>'.$body.'</td>';
    $html .= '</tr>';
    $html .= '</table>';
    
    return $html;
}
//=====================================================================//
//  FUNCTION: html_collapsible_panel                                   //
//========================= END OF FUNCTION ===========================//

Usage

$panel1 = html_collapsible_panel(array(
    'title'=>'I am collapsed panel',
    'html'=>'This is the collapsed content.',
    'collapsed'=>true,
));

$panel2 = html_collapsible_panel(array(
    'title'=>'I am collapsible panel',
    'html'=>'Click the icon to collapse.',
    'collapsed'=>false,
));

echo $panel1;

echo '
';

echo $panel2;

Output

Updated on: 25 Apr 2024