Ein benutzerdefiniertes Akkordeon-Menü aus dem Lagerbestand erstellen

Question

Ich habe versucht, ein Akkordeon-Menü für eine Liste von R Shiny-Dashboards zu verwenden, die ich habe. Die Idee ist, dass durch Klicken auf den Listeneintrag eine Beschreibung auf eine Akkordeon-Art erweitert wird.

Ich benutze die animierte Version des accordion menu from W3Schools und versuche, es an meine Bedürfnisse anzupassen. Allerdings muss der Beschreibungsteil größer werden, weil der Hintergrund der Beschreibung ein Vorschaubild des Dashboards sein soll.

Allerdings habe ich Schwierigkeiten, es mit dieser Stock-Version arbeiten, aufgrund der Art, wie sie die Erweiterung des Beschreibungselements erleichtern. so weit

Hier ist mein Code für das, was ich zur Zeit habe, die

im Wesentlichen die animierte Version der W3Schools ist

var acc = document.getElementsByClassName("accordion"); 
 
var i; 
 

 
for (i = 0; i < acc.length; i++) { 
 
    acc[i].onclick = function() { 
 
    this.classList.toggle("active"); 
 
    var panel = this.nextElementSibling; 
 
    if (panel.style.maxHeight){ 
 
     panel.style.maxHeight = null; 
 
    } else { 
 
     panel.style.maxHeight = panel.scrollHeight + "px"; 
 
    } 
 
    } 
 
}

/* Style the buttons that are used to open and close the accordion panel */ 
 
button.accordion { 
 
    background-color: #eee; 
 
    color: #444; 
 
    cursor: pointer; 
 
    padding: 18px; 
 
    width: 100%; 
 
    text-align: left; 
 
    border: none; 
 
    outline: none; 
 
    transition: 0.4s; 
 
} 
 
button.accordion.active, button.accordion:hover { 
 
    background-color: #ccc; 
 
} 
 

 
/* Add a background color to the button if it is clicked on (add the .active class with JS), and when you move the mouse over it (hover) */ 
 
/* Style the accordion panel. Note: hidden by default */ 
 
div.previewPanel { 
 
    padding: 0 18px; 
 
    background-color: white; 
 
    max-height: 0; 
 
    overflow: hidden; 
 
    transition: max-height 0.2s ease-out; 
 
}

<button class="accordion">Thing1</button> 
 
<div class="previewPanel"> 
 
    <p>Preview image goes here</p> 
 
</div> 
 
<button class="accordion">Thing2</button> 
 
<div class="previewPanel"> 
 
    <p>Preview image goes here</p> 
 
</div> 
 
<button class="accordion">Thing3</button> 
 
<div class="previewPanel"> 
 
    <p>Preview image goes here</p> 
 
</div> 
 
<button class="accordion">Thing4</button> 
 
<div class="previewPanel"> 
 
    <p>Preview image goes here</p> 
 
</div> 
 
<button class="accordion">Thing5</button> 
 
<div class="previewPanel"> 
 
    <p>Preview image goes here</p> 
 
</div> 
 
<button class="accordion">Thing6</button> 
 
<div class="previewPanel"> 
 
    <p>Preview image goes here</p> 
 
</div>

Und hier ist ein Link zu einem codepen mit Elementen markiert in eine Art, die besser vermitteln könnte, was ich versuche zu tun.

Die Frage ist: Was kann ich tun, was ich habe, damit ich die Größe des erweiterten Bereichs ändern kann, oder was könnte ich verwenden, die besser funktionieren würde? Die exec-Typen mögen Animationen und schlankes Design, weil sie potenziellen Kunden einiges davon zeigen.

Answer 1

Ich empfehle Bootstrap für eine schöne visuelle Ausgabe zu verwenden.

W3 school Bootstrap Accordion

Bootstrap Accordion Example

Answer 2

var acc = document.getElementsByClassName("accordion"); 
 
var i; 
 

 
for (i = 0; i < acc.length; i++) { 
 
    acc[i].onclick = function() { 
 
    this.classList.toggle("active"); 
 
    var panel = this.nextElementSibling; 
 
    if (panel.style.maxHeight){ 
 
     panel.style.maxHeight = null; 
 
    } else { 
 
     panel.style.maxHeight = panel.scrollHeight + "px"; 
 
    } 
 
    } 
 
}

/* Style the buttons that are used to open and close the accordion panel */ 
 

 
.previewPanel{ 
 
    background-image:url("http://www.newdesignfile.com/postpic/2010/01/web-page-header-design_201166.png"); 
 
} 
 

 
button.accordion { 
 
    background-color: #eee; 
 
    color: #444; 
 
    cursor: pointer; 
 
    padding: 18px; 
 
    width: 100%; 
 
    text-align: left; 
 
    border: none; 
 
    outline: none; 
 
    transition: 0.4s; 
 
} 
 
button.accordion.active, button.accordion:hover { 
 
    background-color: #ccc; 
 
} 
 

 
/* Add a background color to the button if it is clicked on (add the .active class with JS), and when you move the mouse over it (hover) */ 
 
/* Style the accordion panel. Note: hidden by default */ 
 
div.previewPanel { 
 
    padding: 0 18px; 
 
    background-color: white; 
 
    max-height: 0; 
 
    overflow: hidden; 
 
    transition: max-height 0.2s ease-out; 
 
}

<button class="accordion">Thing1</button> 
 
<div class="previewPanel"> 
 
    <p>Preview image goes here</p> 
 
</div> 
 
<button class="accordion">Thing2</button> 
 
<div class="previewPanel"> 
 
    <p>Preview image goes here</p> 
 
</div> 
 
<button class="accordion">Thing3</button> 
 
<div class="previewPanel"> 
 
    <p>Preview image goes here</p> 
 
</div> 
 
<button class="accordion">Thing4</button> 
 
<div class="previewPanel"> 
 
    <p>Preview image goes here</p> 
 
</div> 
 
<button class="accordion">Thing5</button> 
 
<div class="previewPanel"> 
 
    <p>Preview image goes here</p> 
 
</div> 
 
<button class="accordion">Thing6</button> 
 
<div class="previewPanel"> 
 
    <p>Preview image goes here</p> 
 
</div>