CODEWITHSUNDEEP
jqueryhtmlcss
Valentin Petkov
Valentin Petkov

Reputation: 15

How to show/hide div at the bottom of a page (sticky footer toggled on and off)

I want to create a changelog at the bottom of my page, which can be toggled on (shown) and off (hidden, only a small arrow or "Changelog" button so it can be shown again)

This is the code for the div (Full page view is more accurate): 

.index_changelog {
    background-color: #222222;
    font: normal normal bold 2em/normal "Arial", Helvetica, sans-serif;
    text-align: center;
    color: rgb(64, 126, 196);
    resize: none;
    border: black;
    border-bottom: blue 1em;
    overflow-y: scroll;
    overflow-x: hidden;
    height: 100px;
    width: 95%;
    position: fixed; 
    bottom: 0; 
}
<div class = "footer">
          <textarea class="index_changelog" allign="center" readonly="readonly">
    SOME TEXT HERE
    SOME TEXT HERE
    SOME TEXT HERE
    SOME TEXT HERE
    SOME TEXT HERE
          </textarea>
      </div>

Upvotes: 0

Views: 1905

Answers (2)

nallenanderson
nallenanderson

Reputation: 96

There are a couple of ways that you could do it. Using JQuery, simply toggle a class that causes the footer to be positioned within the body element.

Something like 

$('.showMe').click(function(){
    $('.index_changelog').toggleClass('bottom');
});

http://codepen.io/nallenanderson/pen/ONEpRb

You can style it up a little bit by adding to your .index-changelog

transition: all 0.3s ease-in-out;

Upvotes: 1

hmd
hmd

Reputation: 970

By using Jquery's method .slideToggle() you can do this easily. Don't forget to include Jquery Library:

.index_changelog {
    background-color: #222222;
    font: normal normal bold 2em/normal "Arial", Helvetica, sans-serif;
    text-align: center;
    color: rgb(64, 126, 196);
    resize: none;
    border: black;
    border-bottom: blue 1em;
    overflow-y: scroll;
    overflow-x: hidden;
    height: 100px;
    width: 95%;
    position: fixed; 
    bottom: 0; 
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>

<button type="button" onclick="$('.footer').slideToggle('slow');">Changelog</button>

<div class = "footer">
          <textarea class="index_changelog" allign="center" readonly="readonly">
    SOME TEXT HERE
    SOME TEXT HERE
    SOME TEXT HERE
    SOME TEXT HERE
    SOME TEXT HERE
          </textarea>
      </div>

Upvotes: 1

Related Questions