PHP массив для начальной загрузки аккордеона

Это простая начальная гармошка:

<div class="panel-group" id="accordion1">
<div class="panel panel-info">
<div class="panel-heading" data-toggle="collapse" data-parent="#accordion3" data-target="#_1-1">XXX</div>
<div id="_1-1" class="panel-collapse collapse">XXX</div>
</div>
<div class="panel panel-info">
<div class="panel-heading" data-toggle="collapse" data-parent="#accordion3" data-target="#_1-2">XXX</div>
<div id="_1-2" class="panel-collapse collapse">#accordion2</div>
</div>
<div class="panel panel-info">
<div class="panel-heading" data-toggle="collapse" data-parent="#accordion3" data-target="#_1-3">XXX</div>
<div id="_1-3" class="panel-collapse collapse">XXX</div>
</div>
</div>

Чтобы создать суб аккордеон, мы можем скопировать #accordion1 и наклеить на accordion2 текст

ВОТ Вот пример того, что я хочу получить, «преобразовав» массив PHP в аккордеон, например:

<?php
$unit = array (
"unit1" => array(
"outcome1-1" => "element1-1",
"outcome1-2" => "element1-2"),
"unit2" => array(
"outcome2-1" => array(
"picture2-1" => "img2-1"),
"outcome2-2" => "element2-2"),
"unit3" => array(
"outcome3-1" => "element3-1",
"outcome3-2" => "element3-2")
);
?>

Вот как я пытаюсь динамически сгенерировать загрузочный аккордеон:

<?php
function array2accordion($array, $level = 1) {

$out='<div id="accordion'.$level.'" class="panel-group">';

$i=0; foreach($array as $key => $elem){ $i++;

if(!is_array($elem)){

$out=$out.'
<div class="panel panel-info">
<div class="panel-heading" data-toggle="collapse" data-parent="#accordion'.$level.'" data-target="#_'.$key.$level.'-'.$key.$i.'">'.$key.'</div>
<div id="_'.$key.$level.'-'.$key.$i.'" class="panel-collapse collapse">'.$key.'</div>
</div>';

}else{
$out=$out.'
<div class="panel panel-info">
<div class="panel-heading" data-toggle="collapse" data-parent="#accordion'.$level.'" data-target="#_'.$key.$level.'-'.$key.$i.'">'.$key.'</div>
<div id="_'.$key.$level.'-'.$key.$i.'" class="panel-collapse collapse">'.array2accordion($elem, $level + 1).'</div>
</div>';
}
}

$out=$out.'</div>';

return $out;
}

echo array2accordion($unit);
?>

На самом деле это не работает должным образом, что я делаю не так?

1

Решение

Я думаю, что это поможет вам:

<?php
function generateAccordion(array $values){
$i = 1;
$html_accordion = '<div class="panel-group" id="accordion1">';
foreach( $values as $id => $items){
$html_accordion .= <<<HTML
<div class="panel panel-info">
<div class="panel-heading" data-toggle="collapse" data-parent="#accordion3" data-target="#$id">Collapse Nro. $i</div>
<div id="$id" class="panel-collapse collapse">
HTML;
foreach($items as $item){
$html_accordion .= <<<HTML
<p><a href="#" >$item</a></p>
HTML;
}//end foreach items

$html_accordion .= '</div></div>';
$i++;
}//end foreach collapses elements
$html_accordion .= '</div>';
return $html_accordion;

}

?>

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
<title>Bootstrap 101 Template</title>

<!-- Bootstrap -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">

<!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
<![endif]-->
</head>
<body>
<div class="container">
<?php
############################################################################
//Put here your values:
$accordion1 = array(
//$id => [val1, val2, ...]
"_1-1" => ["a1", "a2", "a3"],
"_1-2" => ["b1", "b2", "b3"],
"_1-3" => ["c1", "c2", "c3","c4"]
//and so on...
);
//output:
echo generateAccordion($accordion1);
#############################################################################
?>
</div>

<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<!-- Include all compiled plugins (below), or include individual files as needed -->
<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
</body>
</html>

Вы должны поместить в массив $ accordion1 элементы, которые вы хотите показать в аккордеоне.

редактировать

В своем обновленном коде вы забыли внутренний класс accordion:

 "<div class="accordion-inner">...</div>"

Смотрите этот пост Аккордеон в Твиттере Аккордеон?

Вот ваш код обновлен:

function array2accordion($array, $level = 1) {

$out='<div id="accordion'.$level.'" class="panel-group">';
$out.='<div class="accordion-inner">';//LOOK ME!!!

$i=0;

foreach($array as $key => $elem){ $i++;
if(!is_array($elem)){

$out=$out.'
<div class="panel panel-info">
<div class="panel-heading" data-toggle="collapse" data-parent="#accordion'.$level.'" data-target="#_'.$key.$level.'-'.$key.$i.'">'.$key.'</div>
<div id="_'.$key.$level.'-'.$key.$i.'" class="panel-collapse collapse">'.$key.'</div>
</div>';

}else{
$out=$out.'
<div class="panel panel-info">
<div class="panel-heading" data-toggle="collapse" data-parent="#accordion'.$level.'" data-target="#_'.$key.$level.'-'.$key.$i.'">'.$key.'</div>
<div id="_'.$key.$level.'-'.$key.$i.'" class="panel-collapse collapse">'.array2accordion($elem, $level + 1).'</div>
</div>';
}
}

$out=$out.'</div>';
$out=$out.'</div>';

return $out;
}

echo array2accordion($unit);
?>

Если это не поможет, дайте мне знать;)

1

Другие решения

Других решений пока нет …

По вопросам рекламы ammmcru@yandex.ru
Adblock
detector