Einzelnen Beitrag anzeigen
  #1 (permalink)  
Alt 06.04.2020, 00:38
Iago2 Iago2 ist offline
Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 13.09.2005
Beiträge: 83
Iago2 befindet sich auf einem aufstrebenden Ast
Standard 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');
       
	      
	  });
Mit Zitat antworten
Sponsored Links