zurck zur Startseite
  


Zurck 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 05.04.2020, 23:38
Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 13.09.2005
Beitrge: 79
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 05.04.2020, 23:48
Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 13.09.2005
Beitrge: 79
Iago2 befindet sich auf einem aufstrebenden Ast
Standard

Sorry, ich poste es und dann sehe ich es:

Ich habe max-height bei .panel.show vergrssert, ist natrlich auch nicht ideal, da ich nicht weiss, wieviel Eintrge 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 Beitrge zu antworten.
Es ist Ihnen nicht erlaubt, Anhnge hochzuladen.
Es ist Ihnen nicht erlaubt, Ihre Beitrge 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 14:03
Accordion soll automatisch ffnen seerose Javascript & Ajax 2 24.05.2018 19:07
Accordion Problem Internet Explorer beamwe CSS 3 30.11.2012 17:16
Accordion in Nav Moby Javascript & Ajax 4 07.01.2011 07:40
css - Linie oben wird statt gepunktet gestrichelt dargestellt Agnes CSS 2 19.11.2007 15:58


Alle Zeitangaben in WEZ +2. Es ist jetzt 03:31 Uhr.