从股票代码

Question

建立一个自定义的手风琴菜单我一直在尝试使用手风琴菜单列出R闪亮仪表板。这个想法是，单击列表条目以手风琴的方式展开描述。

我正在使用股票动画版本accordion menu from W3Schools并试图使其适应我的需求。不过，我需要将描述部分展开为更大，因为我希望描述的背景是仪表板的预览图像。

但是，我很难使它适用于这个股票版本，因为它们促进了描述部分的扩展。

这里是我的代码迄今为我现在有，这基本上是W3Schools的

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>

这里的动画版被链接到一个codepen与标记中的元素这种方式可能会更好地传达我想要做的事情。

问题是：我可以做些什么来改变扩大区域的大小，或者我可以使用哪些更好的工作？ exec类型非常喜欢动画和时尚的设计，因为它们确实向潜在客户展示了这些东西。

Answer 1

我建议使用Bootstrap进行一个很好的视觉输出。

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>