从股票代码构建自定义手风琴菜单

Question

我一直在尝试使用Accordion菜单获取我有的R Shiny仪表板列表。这个想法是单击列表条目以手风琴方式扩展描述。

我正在使用accordion menu from W3Schools的股票动画版本并尝试根据我的需要进行调整。但是，我需要将描述部分扩展为更大，因为我希望描述的背景是仪表板的预览图像。

但是，由于它们促进了描述部分的扩展，我在使用这个版本版本时遇到了困难。

到目前为止，这是我目前的代码，基本上是W3Schools的动画版本

c.__dict__

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;
}

这是一个指向codepen的链接，其中的元素标记方式可能更好地表达我正在尝试做的事情。

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

Answer 1

我建议使用Bootstrap来获得一个很好的视觉输出。

W3 school Bootstrap Accordion

Bootstrap Accordion Example

Answer 2

＆＃13;

＆＃13;

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";
    } 
  }
}

＆＃13;

/* 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;
}

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;