ウィンドウの下部に固定折り畳み可能なアコーディオンを作成する

Question

このようなページウィンドウの下部に固定の折りたたみ可能なアコーディオンを作成したいと考えています（sample）。サンプルには、下部に灰色のアコーディオンがあります。

どのようなヘルプも素晴らしいでしょう。

ありがとうございました。

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

 
for (i = 0; i < acc.length; i++) { 
 
    acc[i].onclick = function(){ 
 
     this.classList.toggle("active"); 
 
     this.nextElementSibling.classList.toggle("show"); 
 
    } 
 
}

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

 
/* 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) */ 
 
button.accordion.active, button.accordion:hover { 
 
    background-color: #ddd; 
 
} 
 

 
/* Style the accordion panel. Note: hidden by default */ 
 
div.panel { 
 
    padding: 0 18px; 
 
    background-color: white; 
 
    display: none; 
 
} 
 

 
/* The "show" class is added to the accordion panel when the user clicks on one of the buttons. This will show the panel content */ 
 
div.panel.show { 
 
    display: block; 
 
}

<button class="accordion">Section 1</button> 
 
<div class="panel"> 
 
    <p>Lorem ipsum...</p> 
 
</div>

Answer 1

ラッパーdivを作成し、それを次のようstyleを与える：

.wrapper { 
    position: fixed; 
    bottom: 0; 
    left: 0; 
    width: 100%; 
} 

のみアニメーションは、あなたがそれを持っているしたい場合は必ず不足しているが、されていません。

DEMO

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

 
for (i = 0; i < acc.length; i++) { 
 
    acc[i].onclick = function() { 
 
    this.classList.toggle("active"); 
 
    this.nextElementSibling.classList.toggle("show"); 
 
    } 
 
}

.wrapper { 
 
    position: fixed; 
 
    bottom: 0; 
 
    left: 0; 
 
    widtH: 100%; 
 
} 
 
/* 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; 
 
} 
 
/* 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) */ 
 

 
button.accordion.active, 
 
button.accordion:hover { 
 
    background-color: #ddd; 
 
} 
 
/* Style the accordion panel. Note: hidden by default */ 
 

 
div.panel { 
 
    padding: 0 18px; 
 
    background-color: white; 
 
    display: none; 
 
} 
 
/* The "show" class is added to the accordion panel when the user clicks on one of the buttons. This will show the panel content */ 
 

 
div.panel.show { 
 
    display: block; 
 
}

<div class="wrapper"> 
 
    <button class="accordion">Section 1</button> 
 
    <div class="panel"> 
 
    <p>Lorem ipsum...</p> 
 
    </div> 
 
</div>