Accordion, nicht alle li-Einträge werden dargestellt.
Hallo,
Ich schreibe gerade einen Texteditor. (PHP/HTML/CSS/JS)
Für das Seitenlayout nehme ich bootstrap. Ein Akkordion, welches in der linken Spalte Listenelemente (Headlines) ausgibt mache ich jedoch nur mit HTML/CSS/JS, nehme als nicht das Bootstap Akkordion.
Die erste Hürde ist die Überschriften und Unterüberschriften in der linken Spalte auszugeben, dazu lese ich die Daten von einer JSON Datei mit PHP.
Jetzt habe ich aber ganz klar ein CSS-Darstellungsproblem: Das sehe ich daran, dass die .panel ul- Elemente unten offen sind (also der untere Rahmen fehlt). Weiss hier jemand einen Rat? vielen Dank.
Linke Spalte im Bootstrap-Grid
HTML-Code:
<div class="col-sm-4 sections-box">
<?php foreach ($obj as $key => $jsons) {
foreach($jsons as $key => $value) {
if($key == 'label'){
echo "<div class='accordion d-flex'><span class='mr-auto'>".$value."</span>";
echo "<button class='btn btn-success btn-sm mr-1'>+</button><button class='btn btn-danger btn-sm'>DEL</button></div>";
}
if($key == 'items'){
echo "<div class='panel'><ul>";
foreach($value as $key => $val) {
foreach($val as $k => $v) {
if($k == 'label') {
echo "<li><a>".$v."</a></li>";
}
}
}
echo "</ul></div>";
}
}
}
?>
</div>
CSS:
Code:
.sections-box {
margin:0px;
padding:0px;
height:600px;
width:100%;
overflow:hidden;
overflow-y:scroll;
}
div.accordion {
background-color: #eee;
color: #444;
cursor: pointer;
padding:18px;
width: 100%;
border: none;
text-align: left;
outline: none;
font-size: 15px;
transition: 0.8s;
}
.active, .accordion:hover {
background-color: #ccc;
}
/* div.accordion:after {
content: '\25bc';
font-size: 13px;
color: #777;
float: right;
margin-left: 5px;
}
div.accordion.active:after {
/* content: "\25b2";
color: #FFF;
}*/
.panel {
padding: 0 18px;
background-color: white;
overflow: hidden;
transition: 0.8s ease-in-out;
opacity: 0;
max-height:0;
}
.panel.show {
opacity: 1;
max-height: 500px;
}
.panel.hide {
opacity: 0;
height: 0;
}
/* headlines */
.panel {
padding:0;
}
.panel ul {
margin:0;
padding:0;
list-style-type: none;
width:100%;
border:1px solid red;
}
.panel ul li {
padding:0;
margin:0;
}
.panel ul li a {
padding:15px;
text-decoration:none;
display:block;
border:1px solid green;
}
.panel ul li a:hover {
background-color:#3D4849;
color:#ffffff !important;
}
JS:
Code:
$('.accordion').click(function() {
var $this = $(this).toggleClass('active');
var $panel = $this.next().toggleClass('show');
// $('.accordion.active').not(this).removeClass('active').next().removeClass('show');
});
|
