株式コードからカスタムアコーディオンメニューを構築する

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へのリンクである、私が現在持っているもののために、これまでです私がしようとしていることをよりよく伝える方法。

質問：拡張領域のサイズを変更できるようにするにはどうすればよいですか、それを使用すると効果的でしょうか？エグゼクティブタイプは実際にはアニメーションや洗練されたデザインが好きです。潜在的なクライアントにこのようなことをいくつか示しているからです。

Answer 1

私は素晴らしいビジュアル出力にブートストラップを使用することをお勧めします。

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>