zurück zur Startseite
  


Zurück XHTMLforum > (X)HTML und CSS > CSS
Seite neu laden Accordion, nicht alle li-Einträge werden dargestellt.

Antwort
 
LinkBack Themen-Optionen Ansicht
  #1 (permalink)  
Alt 06.04.2020, 00:38
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
  #2 (permalink)  
Alt 06.04.2020, 00:48
Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 13.09.2005
Beiträge: 83
Iago2 befindet sich auf einem aufstrebenden Ast
Standard

Sorry, ich poste es und dann sehe ich es:

Ich habe max-height bei .panel.show vergrössert, ist natürlich auch nicht ideal, da ich nicht weiss, wieviel Einträge ich schliesslich habe:

Code:
.panel.show {
        opacity: 1;
        max-height:3000px;
    }
Mit Zitat antworten
Sponsored Links
Antwort

Themen-Optionen
Ansicht

Forumregeln
Es ist Ihnen nicht erlaubt, neue Themen zu verfassen.
Es ist Ihnen nicht erlaubt, auf Beiträge zu antworten.
Es ist Ihnen nicht erlaubt, Anhänge hochzuladen.
Es ist Ihnen nicht erlaubt, Ihre Beiträge zu bearbeiten.

BB-Code ist an.
Smileys sind an.
[IMG] Code ist an.
HTML-Code ist aus.
Trackbacks are an
Pingbacks are an
Refbacks are aus


Ähnliche Themen
Thema Autor Forum Antworten Letzter Beitrag
Accordion / Felder Anordnung, Steuerung funktioniert nicht Iago2 Javascript & Ajax 27 15.02.2020 15:03
Accordion soll automatisch öffnen seerose Javascript & Ajax 2 24.05.2018 20:07
Accordion Problem Internet Explorer beamwe CSS 3 30.11.2012 18:16
Accordion in Nav Moby Javascript & Ajax 4 07.01.2011 08:40
css - Linie oben wird statt gepunktet gestrichelt dargestellt Agnes CSS 2 19.11.2007 16:58


Alle Zeitangaben in WEZ +2. Es ist jetzt 13:53 Uhr.