Create a fixed collapsable accordion at bottom of the window
<p>I want to create a fixed collapsable accordion at the bottom of the page window like this <a href="https://pixelarity.com/landscape" rel="nofollow">sample</a>. in the sample we have the grey accordion at the bottom.</p>

<p>Any help will be great.</p>

<p>Thanks.</p>

<p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
<div class="snippet-code">
<pre class="snippet-code-js lang-js prettyprint-override"><code>var acc = document.getElementsByClassName("accordion");
var i;

for (i = 0; i &lt; acc.length; i++) {
    acc[i].onclick = function(){
        this.classList.toggle("active");
        this.nextElementSibling.classList.toggle("show");
    }
}</code></pre>
<pre class="snippet-code-css lang-css prettyprint-override"><code>/* 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;
}</code></pre>
<pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;button class="accordion"&gt;Section 1&lt;/button&gt;
&lt;div class="panel"&gt;
  &lt;p&gt;Lorem ipsum...&lt;/p&gt;
&lt;/div&gt;</code></pre>
</div>
</div>
</p>