В javaScript show hide есть проблема с отображением аккордеона, который берет данные из phpMyAdmin.

Question

В javaScript show hide есть проблема с отображением аккордеона, который берет данные из phpMyAdmin.

Я сделал аккордеон, и я не знаю, почему я вижу простой текст без каких-либо функций CSS или JavaScript.
Я убедился, что ссылка, показанная для каскадной таблицы стилей и JavaScript, работает.
Позже моя задача состоит в том, чтобы создать таблицу в MySQL и импортировать данные оттуда, но сначала я хочу решить эту проблему, сэр. Я также не получаю никакой ошибки, в которой я могу работать.

Вот мой код

 <?php
$arr_content = array(
array('title' =>  'Section 1',
'content'=> 'Section 1 intro here'
),

array('title' =>  'Section 2',
'content'=> 'Section 2 intro here'
),array('title' =>  'Section 3',
'content'=> 'Section 3 intro here'
),);
?><html>
<head>
<title>Accordion</title>
<link rel="stylesheet" href=
"https://maxcdn.bootstrapcdn.com/bootstrap
/3.3.7/css/bootstrap.min.css" />

<link rel="stylesheet" href="bootstrap.css" />
<script src="bootstrap.js"></script>
</head><body>
<div class="panel-group" id="accordion" role="tablist" aria-
multiselectable="true">
<?php $i=1; foreach($arr_content as $acontent) {  ?>
<div class="panel panel-default">

<div class="panel-heading" role="tab" id="headingOne <?php echo $i; ?
>">
<h4 class="panel-title"><a <?php if($i>1) echo 'class="collapsed" ';?>
role="button" data-toggle="collapse" data-parent
="#accordion" href="#collapse<?php echo $i;
?>" aria-expanded ="<?php echo ($i==1) ? 'true'
:'false'; ?>true" aria-controls="collapse
<?php echo $i; ?>"></a>
</h4>
</div>
<div id="collapse<?php echo $i; ?>" class="panel-collapse collapse <?
php
if($i==1) echo 'in';
?>" role="tabpanel" aria-labelledby="heading <?php echo $i; ?>">
<div class="panel-body">
<?php echo $acontent['content']; ?>
</div>
</div>
</div><?php $i++; } ?><script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</div>
</body>
</html>

0

accordion css html javascript php

Решение

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

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

Источник

Accepted Answer

Вы включили загрузчик css дважды, а также js дважды. И я немного почистил код. Надеюсь это поможет.

    <?php
$arr_content = array(
array('title' =>  'Section 1',
'content'=> 'Section 1 intro here'
),

array('title' =>  'Section 2',
'content'=> 'Section 2 intro here'
),array('title' =>  'Section 3',
'content'=> 'Section 3 intro here'
),);
?>
<html>
<head>
<title>Accordion</title>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
</head>

<body>
<div class="panel-group" id="accordion">
<?php $i=1; foreach($arr_content as $acontent) {  ?>
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title">
<a data-toggle="collapse" data-parent="#accordion" href="#collapse<?php echo $i; ?>"><?php echo $acontent['title']; ?></a>
</h4>
</div>
<div id="collapse<?php echo $i; ?>" class="panel-collapse collapse <?php if($i === 1) { echo " in "; } ?>">
<div class="panel-body"><?php echo $acontent['content']; ?></div>
</div>
</div>
<?php $i++; } ?>

</div>

<!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>

<!-- Latest compiled JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

</body>
</html>

1