Develop Reference

Switch visible div based on user click

so I have a div with navigational links (set up using ul/li and a href within the li's).
Below that I have 4 other div's. I only want 1 div shown at a time, they will then switch based on the users selection of the navigational LI's
I've used a similar setup on a different page, and have tried to port it over to my current page but to no avail...
JSFIDDLE
Please see the above jsfiddle for the HTML/CSS/JS involved.
HTML:
<div id="content">
<div class="man-banner"></div>
<div class="banner-nav" id="tabs">
<ul class="tabs" style="padding-left: 0px">
<li class="active"><span>Home</span></li>
<li><span>Find Your Vehicle</span></li>
<li><span>Downloads</span></li>
<li><span>Support</span></li>
</ul>
</div>
<div id="tab-content">
<div id="home" class="tab_content">
1234156124
</div>
<div id="findvehicle" class="tab_content">
abasdjfniasjfnasdf
</div>
<div id="downloads" class="tab_content">
asdfniadhnfiasdn890384834854854jnrjrjr
</div>
<div id="support" class="tab_content">
asdfniadhTHIS IS SUPPORT
</div>
</div>
</div>
Any help is welcomed, I am still learning (aren't we always), so with any fixes/tips, please detail why it works, or what i did wrong that's making this not work. (if that makes sense!)
Thanks again for your help!

This is one way of achieving it.
HTML - added "navlink" class to your anchor elements, and gave them a data-section attribute that refers to the tab they should show:
<div id="content">
<div class="banner-nav" id="tabs">
<ul class="tabs" style="padding-left: 0px">
<li><span>Home</span></li>
<li><span>Find Your Vehicle</span></li>
<li><span>Downloads</span></li>
<li><a data-section="support" href="#support" rel="support"><span>Support</span></a></li>
</ul>
</div>
<div id="tab-content">
<div id="home" class="tab_content">
1234156124
</div>
<div id="findvehicle" class="tab_content">
abasdjfniasjfnasdf
</div>
<div id="downloads" class="tab_content">
asdfniadhnfiasdn890384834854854jnrjrjr
</div>
<div id="support" class="tab_content">
asdfniadhTHIS IS SUPPORT
</div>
</div>
</div>
JavaScript - see inline comments:
$(document).ready(function(){
// start of at the home page
navigateTo("#home");
// for every navlink element
$('.tabs > li > a').each(function() {
//when it is clicked
$(this).click(function(e) {
e.preventDefault();
// navigate to the section ilinked to in the href
navigateTo($(this).attr('href'));
});
});
});
function navigateTo(sectionId) {
//hide all tabs
$('.tab_content').hide();
//then show the one we want
$(sectionId).show();
}

You don't need separate click handlers for each menu item. The #tabs li click handler will suffice. I removed the click handlers on each of the links since they are not necessary.
$("#tabs li").click(function() {
// First remove class "active" from currently active tab
$("#tabs li").removeClass('active selected');
// Now add class "active" to the selected/clicked tab
$(this).addClass("active selected");
// Hide all tab content
$(".tab_content").hide();
// Here we get the href value of the selected tab
var selected_tab = $(this).find("a").attr("href");
// Show the selected tab content
$(selected_tab).fadeIn(0);
// At the end, we add return false so that the click on the link is not executed
return false;
});
ul {
list-style: none;
}
.man-banner {
background: url("../images/man-logo.png") no-repeat top;
border-radius: 8px 8px 0 0;
height: 93px;
max-width: 915px;
margin: 15px 15px 0 15px;
}
.banner-nav {
background: #F0F1F2;
border-bottom: 1px solid #D6D8DB;
height: 40px;
max-width: 915px;
margin: 0 15px 15px;
}
.banner-nav a {
font-family: MAN-light, Arial, sans-serif;
font-size: 16px;
margin-left: 20px;
text-decoration: none;
display: block;
float: left;
height: 40px;
position: relative;
color: #303C49;
line-height: 40px;
}
.banner-nav a:hover {
color: #303C49;
}
.banner-nav a:before {
content: "";
position: absolute;
width: 100%;
height: 2px;
bottom: 5;
left: 0;
background-color: #000;
visibility: hidden;
-webkit-transform: scaleX(0);
transform: scaleX(0);
-webkit-transition: all 0.3s ease-in-out 0s;
transition: all 0.3s ease-in-out 0s;
}
.banner-nav a:hover:before {
visibility: visible;
-webkit-transform: scaleX(1);
transform: scaleX(1);
}
ul.tabs li.selected a,
ul.tabs li.selected a:hover {
top: 0px;
font-weight: normal;
background: #FFF;
border-bottom: 1px solid #FFF;
color: #000;
}
/***************************/
/** Main Content Area **/
/***************************/
#content {
width: 950px;
margin: 5 10;
overflow: hidden;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="content">
<div class="man-banner"></div>
<div class="banner-nav" id="tabs">
<ul class="tabs" style="padding-left: 0px">
<li class="active"><a data-tab-id="#home"><span>Home</span></a>
</li>
<li><span>Find Your Vehicle</span>
</li>
<li><span>Downloads</span>
</li>
<li><span>Support</span>
</li>
</ul>
</div>
<div id="tab-content">
<div id="home" class="tab_content">
1234156124
</div>
<div id="findvehicle" class="tab_content">
abasdjfniasjfnasdf
</div>
<div id="downloads" class="tab_content">
asdfniadhnfiasdn890384834854854jnrjrjr
</div>
<div id="support" class="tab_content">
asdfniadhTHIS IS SUPPORT
</div>
</div>
</div>

You can try to use css to show and hide the blocks when there is an onclick event.
Here some sample code:
CSS
.activetab {
display: block;
}
.tab {
display: none;
}
JAVASCRIPT / JQUERY
$(document).ready(function() {
$(".tabmenu").on("click", function() {
$(".activetab").removeClass("activetab");
$(this).addClass("activetab");
});
});
HTML
<div id="content">
<div class="man-banner"></div>
<div class="banner-nav" id="tabs">
<ul class="tabs" style="padding-left: 0px">
<li class="active tabmenu"><span>Home</span></li>
<li class="tabmenu"><span>Find Your Vehicle</span></li>
<li class="tabmenu"><span>Downloads</span></li>
<li class="tabmenu"><span>Support</span></li>
</ul>
</div>
<div id="tab-content">
<div id="home" class="tab_content tab">
1234156124
</div>
<div id="findvehicle" class="tab_content tab">
abasdjfniasjfnasdf
</div>
<div id="downloads" class="tab_content tab">
asdfniadhnfiasdn890384834854854jnrjrjr
</div>
<div id="support" class="tab_content tab">
asdfniadhTHIS IS SUPPORT
</div>
</div>
</div>
If you want I can create a JSFiddle to see how it works
Hope this works for you!

You have a syntax error, you are closing your document ready callback more than once.
$("#findvehicle").click(function(){
$('a[rel="find_your_vehicle"]').trigger("click");
});
}); // Remove this
$("#downloads").click(function(){
$('a[rel="downloads"]').trigger("click");
});
}); // Remove this
When you remove these extra closes the tabs appear. You'll probably want to hide all but the default tab in that document ready call also.

Make footer stay at bottom of page (not fixed to bottom)

I am trying to make just the pages on my website that have the main body content class of ".interior-health-main" have a footer that is static at the bottom of the page. I want it at the absolute bottom, currently if you view some of my pages on a large screen, you will see a bunch of white space after the footer. I want to get rid of this.
I have been looking into this for hours now and tried many things, at first I was going to make the footer on the entire website static at the bottom of the page, but setting the footer's css to position: absolute conflicted with other elements on my home page, which is why I just want it on the ".interior-health-main." If it is possible to change it just for the footers on these pages please let me know, I do not really want examples of fixing this by setting the entire body to position:relative. It just messes up my homepage.
Here is an example of what it looks like with the white space after the footer http://codepen.io/aahmed2/full/KgWNYL/
<p class="nav">This is a Navigation Bar</p>
<div class="interior-health-main">
<div class="container">
<ol class="breadcrumb">
<li>Home</li>
<li>Health Resources</li>
<li class="active">Sample Short Page</li>
</ol>
<h2>Sample Short Page</h2>
</div>
</div>
<div class="footer">
<div class="container">
<div class="row">
<div class="col-sm-4">
<h4>Contact Us</h4>
<p>414 Hardin Hall<br> 3310 Holdredge St<br> Lincoln, NE 68583<br> (402) 472-7363</p>
<div class="affiliates">
<img class="wordmark" src="../_logos/wordmark.svg" alt="University of Nebraska-Lincoln Wordmark">
<img class="extension" src="../_logos/n-extension-rev.svg" alt="Nebraska Extension Logo">
</div>
</div>
<div class="col-sm-4">
<h4>Quick Links</h4>
<p>Human Health</p>
<div class="line"></div>
<p>Pet Diseases</p>
<div class="line"></div>
<p>Livestock Diseases</p>
<div class="line"></div>
<p>Events</p>
<div class="line"></div>
</div>
<div class="col-sm-4">
<h4>Attention</h4>
<p>All information on this site is intended for informational use only. Contact your doctor or veterinarian for health concerns.</p><br>
<h5><a class="partner" href="#">Partners &amp Stakeholders</a></h5>
</div>
</div>
<div class="copyright">
<div class="col-xs-9">
<h6>© 2016 Nebraska One Health. Site Map.</h6>
</div>
<div class="col-xs-3">
<img class="social pull-right" src="../_logos/twitter-logo-button.svg" alt="twitter icon">
<img class="social pull-right" src="../_logos/facebook-logo-button.svg" alt="facebook icon">
</div>
</div>
</div>
</div>
Here is my css
.nav {
text-align: center;
padding: 25px 0;
background-color: #c1c0be;
color: #fff;
position: fixed;
width: 100%;
z-index: 2;
}
.interior-health-main {
padding-top: 80px;
padding-bottom: 20px;
}
#media (max-width: 479px) {
.interior-health-main {
padding-top: 50px;
}
}
.footer {
background: #333332;
border-top: 9px solid #ffffff;
color: #fff;
padding-top: 35px;
padding-bottom: 35px;
}

You can position the footer absolute like they did here
https://getbootstrap.com/examples/sticky-footer/
.footer {
position: absolute;
bottom: 0;
width: 100%;
/* Set the fixed height of the footer here */
height: 60px;
/* background-color: #f5f5f5; */
}
<footer class="footer">
<div class="container">
<p class="text-muted">Place sticky footer content here.</p>
</div>
</footer>
How did it conflict when you tried your way? update your post with what you did?

Please reference this question to find your solution.
I applied one of the solutions from the above link to your code.
Wrap your code in a #holder div.
Add the following CSS:
html,body{
height: 100%
}
#holder{
min-height: 100%;
position:relative;
}
.footer {
background: #333332;
border-top: 9px solid #ffffff;
color: #fff;
padding-top: 35px;
padding-bottom: 35px;
height: 300px;
width:100%;
position: absolute;
left: 0;
bottom: 0;
}
.interior-health-main {
padding-top: 80px;
padding-bottom: 300px; /* height of footer */
}
Here is the working fiddle:
https://jsfiddle.net/DTcHh/25475/

I wrapped your page (not containing footer) into .page-wrap div, and edit you codePen code and just add this piece of code to your css
html, body {
height: 100%;
}
.page-wrap {
min-height: 100%;
/* equal to footer height (with margin and border) */
margin-bottom: -299px ;
}
.page-wrap:after {
content: "";
display: block;
}
.footer, .page-wrap:after {
/* page-wrap after content must be the same height as footer */
height: 299px;
}
Demo

How to change button colour after clicking another button

I want to make my buttons change colour after clicking on another button. At the moment, I have an idea in mind... but that would be creating more html pages which is not what I want. The code below features 3 buttons where button1 is set as dark grey, and button2 and button3 are light grey. Clicking button2 or button3 should change to dark grey, and button1 should be light grey. I have tried researching on the internet and haven't found any solution to this.
Note: I have created my buttons using divs.
Here's a snippet of my code:
.select:hover {
background-color: #2a2a2a;
}
.select:visited {
background-color: pink;
}
.bcardunlaminated {
display: table-cell;
height: 37px;
width: 210px;
float: left;
background-color: #2a2a2a;
text-align: left;
margin-top: 10px;
line-height: 36px;
}
.bcardmatt {
display: table-cell;
height: 37px;
width: 225px;
float: left;
background-color: #757575;
text-align: left;
margin-left: 3px;
margin-top: 10px;
line-height: 36px;
}
.bcardspotuv {
display: table-cell;
height: 37px;
width: 230px;
float: left;
background-color: #757575;
text-align: left;
margin-left: 3px;
margin-top: 10px;
line-height: 17px;
}
.mat-font {
color: white;
font-size: 9pt;
text-align: center;
}
<div class="materialtable">
<div class="materialrow">
<a href="javascript:;" id=" hideaway1" onclick="document.getElementById('hideaway1').style.display='block';document.getElementById('hideaway2').style.display='none';
document.getElementById('hideaway3').style.display='none';toggleTable();return false">
<div class="bcardunlaminated select">
<div class="mat-font">1</div>
</div>
</a>
<a href="javascript:;" id=" hideaway2" onclick="document.getElementById('hideaway1').style.display='none';document.getElementById('hideaway2').style.display='block';
document.getElementById('hideaway3').style.display='none';toggleTable2();return false">
<div class="bcardmatt select">
<div class="mat-font">2</div>
</div>
</a>
<a href="javascript:;" id=" hideaway3" onclick="document.getElementById('hideaway1').style.display='none';document.getElementById('hideaway2').style.display='none';
document.getElementById('hideaway3').style.display='block';toggleTable3();return false">
<div class="bcardspotuv select">
<div class="mat-font">3</div>
</div>
</a>
</div>
</div>
<br/>
<br/>
<br/>
<div id="hideaway1" style="display:block;">1</div>
<div id="hideaway2" style="display:none;">2</div>
<div id="hideaway3" style="display:none;">3</div>
Any suggestions?

Just add a change to the backgroundColor. I'm using orange here, use the one you want.
<a href="javascript:;" id=" hideaway3" onclick="document.getElementById('hideaway1').style.display='none';document.getElementById('hideaway2').style.display='none';
document.getElementById('hideaway3').style.display='block';document.getElementById('hideaway1').style.backgroundColor='#f60';toggleTable3();return false">
You HAVE to use unique IDs, you are using the same with an space in front, what makes it very confusing and buggy

My suggestion - using jQuery since it seems you do not mind that based on your accepted answer:
You will need to change toggleTable to take an idx to toggle. You also likely want to make the container div of the links clickable instead of having the link. You will need to add a cursor:ponter to the CSS
$(function() {
$(".select").on("click",function(e){
e.preventDefault(); // only needed if .select are links
var idx = $.trim($(this).text());
$(".hideaway").hide();
$("#hideaway"+idx).show();
toggleTable(idx);
});
});
HTML:
<div class="materialtable">
<div class="materialrow">
<div class="bcardunlaminated select">
<div class="mat-font">
1
</div>
</div>
<div class="bcardmatt select">
<div class="mat-font">
2
</div>
</div>
<div class="bcardspotuv select">
<div class="mat-font">
3
</div>
</div>
</a>
</div>
</div>
<br/>
<br/>
<br/>
<div id="hideaway1" class="hideaway">1</div>
<div id="hideaway2" class="hideaway">2</div>
<div id="hideaway3" class="hideaway">3</div>

Here is a sample of what I think you are looking for: http://jsfiddle.net/f60z1nj3/2/
using jquery:
$(function () {
$('.test').click(function(){
if ($(this).hasClass('darkGrey') ){
$(this.children).removeClass('darkGrey')
}
else
{
$(this.children).addClass('darkGrey');
$(this).siblings().children().removeClass('darkGrey');
}
})
});
So I've just given your selectable items a class instead of an id, which is a bit less specific than using an id. Then its a simple onlclick event to add and remove a highlight class I've called darkGrey. I've not included toggling the divs at the bottom, as it looks like you have a function to handle that.

How to fix footer overlapping content when resizing

I have a problem with a template. On a large screen, it's look fine, like this:
But when I resize my browser, the content won't push the footer down. Here is a picture:
Here is my code, which is too long so forgive me.
index.php
<!-- Navigation -->
<nav class="navbar navbar-default navbar-fixed-top">
<div class="container">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header page-scroll">
<!-- simple code -->
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<!-- simple code -->
</div>
<!-- /.navbar-collapse -->
</div>
<!-- /.container-fluid -->
</nav>
<!-- Begin page content -->
<header>
<div class="container">
<div class="row">
<div class="col-lg-12">
<img class="img-responsive" src="<?php echo base_url(); ?>assets/img/simple_img.png" alt="" style="height: 200px;">
<div class="intro-text">
<!-- simple intro -->
</div>
</div>
</div>
</div>
</header>
<footer class="text-center">
<div class="footer-above">
<div class="container">
<div class="row">
<div class="footer-col col-md-4">
<h3>Location</h3>
<p>3481 Melrose Place<br>Beverly Hills, CA 90210</p>
</div>
<div class="footer-col col-md-4">
<h3>Around the Web</h3>
<ul class="list-inline">
<!-- some social networks -->
</ul>
</div>
<div class="footer-col col-md-4">
<h3>About Freelancer</h3>
<p>Freelance is a free to use, open source Bootstrap theme created by Start Bootstrap.</p>
</div>
</div>
</div>
</div>
<div class="footer-below">
<div class="container">
<div class="row">
<div class="col-lg-12">
Copyright © Author <?php echo date("Y"); ?>
</div>
</div>
</div>
</div>
</footer>
Here is my Css, which is also too long so forgive me( I deleted some irrelevant code ).
/* Sticky footer styles
-------------------------------------------------- */
html {
position: relative;
min-height: 100%;
}
body {
/* Margin bottom by footer height */
margin-bottom: 60px;
}
footer {
position: absolute;
bottom: 0;
width: 100%;
/* Set the fixed height of the footer here */
height: 340px;
background-color: #f5f5f5;
}
/* Custom page CSS
-------------------------------------------------- */
/* Not required for template or sticky footer method. */
body > .container {
padding: 60px 15px 0;
}
.container .text-muted {
margin: 20px 0;
}
footer > .container {
padding-right: 15px;
padding-left: 15px;
}
code {
font-size: 80%;
}
/*!
* Start Bootstrap - Freelancer Bootstrap Theme (http://startbootstrap.com)
* Code licensed under the Apache License v2.0.
* For details, see http://www.apache.org/licenses/LICENSE-2.0.
*/
body {
overflow-x: hidden;
}
header {
text-align: center;
color: #fff;
background: #18bc9c;
}
header .container {
padding-top: 100px;
padding-bottom: 50px;
}
#media(min-width:768px) {
header .container {
padding-top: 200px;
padding-bottom: 69px;
}
header .intro-text .name {
font-size: 4.75em;
}
header .intro-text .skills {
font-size: 1.75em;
}
}
#media(min-width:768px) {
.navbar-fixed-top {
padding: 25px 0;
-webkit-transition: padding .3s;
-moz-transition: padding .3s;
transition: padding .3s;
}
.navbar-fixed-top .navbar-brand {
font-size: 2em;
-webkit-transition: all .3s;
-moz-transition: all .3s;
transition: all .3s;
}
.navbar-fixed-top.navbar-shrink {
padding: 10px 0;
}
.navbar-fixed-top.navbar-shrink .navbar-brand {
font-size: 1.5em;
}
}
.navbar {
text-transform: uppercase;
font-family: Montserrat,"Helvetica Neue",Helvetica,Arial,sans-serif;
font-weight: 700;
}
.navbar a:focus {
outline: 0;
}
.navbar .navbar-nav {
letter-spacing: 1px;
}
.navbar .navbar-nav li a:focus {
outline: 0;
}
.navbar-default,
.navbar-inverse {
border: 0;
background-color:#233140;
}
footer {
color: #fff;
}
footer h3 {
margin-bottom: 30px;
}
footer .footer-above {
padding-top: 50px;
background-color: #2c3e50;
}
footer .footer-col {
margin-bottom: 50px;
}
footer .footer-below {
padding: 25px 0;
background-color: #233140;
}
How can I solve this, so the page content will push the footer down...at any size of browser.
Any help is appreciated.

Removing position:absolute; from the footer in the css appears to work. Perhaps consider having it set to absolute at wider screen sizes using media queries if having position:absolute is absolutely (pardon the pun) necessary.
I provided a snippet with the absolute positioning removed, as well as the potential addition to a media query, which is commented out, but there to demonstrate.
/* Sticky footer styles
-------------------------------------------------- */
html {
position: relative;
min-height: 100%;
}
body {
/* Margin bottom by footer height */
margin-bottom: 60px;
}
footer {
width: 100%;
/* Set the fixed height of the footer here */
height: 340px;
background-color: #f5f5f5;
}
/* Custom page CSS
-------------------------------------------------- */
/* Not required for template or sticky footer method. */
body > .container {
padding: 60px 15px 0;
}
.container .text-muted {
margin: 20px 0;
}
footer > .container {
padding-right: 15px;
padding-left: 15px;
}
code {
font-size: 80%;
}
/*!
* Start Bootstrap - Freelancer Bootstrap Theme (http://startbootstrap.com)
* Code licensed under the Apache License v2.0.
* For details, see http://www.apache.org/licenses/LICENSE-2.0.
*/
body {
overflow-x: hidden;
}
header {
text-align: center;
color: #fff;
background: #18bc9c;
}
header .container {
padding-top: 100px;
padding-bottom: 50px;
}
#media(min-width:768px) {
header .container {
padding-top: 200px;
padding-bottom: 69px;
}
header .intro-text .name {
font-size: 4.75em;
}
header .intro-text .skills {
font-size: 1.75em;
}
/*
****Optional****
footer{
position:absolute;
bottom:0px;
}*/
}
#media(min-width:768px) {
.navbar-fixed-top {
padding: 25px 0;
-webkit-transition: padding .3s;
-moz-transition: padding .3s;
transition: padding .3s;
}
.navbar-fixed-top .navbar-brand {
font-size: 2em;
-webkit-transition: all .3s;
-moz-transition: all .3s;
transition: all .3s;
}
.navbar-fixed-top.navbar-shrink {
padding: 10px 0;
}
.navbar-fixed-top.navbar-shrink .navbar-brand {
font-size: 1.5em;
}
}
.navbar {
text-transform: uppercase;
font-family: Montserrat, "Helvetica Neue", Helvetica, Arial, sans-serif;
font-weight: 700;
}
.navbar a:focus {
outline: 0;
}
.navbar .navbar-nav {
letter-spacing: 1px;
}
.navbar .navbar-nav li a:focus {
outline: 0;
}
.navbar-default,
.navbar-inverse {
border: 0;
background-color: #233140;
}
footer {
color: #fff;
}
footer h3 {
margin-bottom: 30px;
}
footer .footer-above {
padding-top: 50px;
background-color: #2c3e50;
}
footer .footer-col {
margin-bottom: 50px;
}
footer .footer-below {
padding: 25px 0;
background-color: #233140;
}
<!-- Navigation -->
<nav class="navbar navbar-default navbar-fixed-top">
<div class="container">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header page-scroll">
<!-- simple code -->
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<!-- simple code -->
</div>
<!-- /.navbar-collapse -->
</div>
<!-- /.container-fluid -->
</nav>
<!-- Begin page content -->
<header>
<div class="container">
<div class="row">
<div class="col-lg-12">
<img class="img-responsive" src="<?php echo base_url(); ?>assets/img/simple_img.png" alt="" style="height: 200px;">
<div class="intro-text">
<!-- simple intro -->
</div>
</div>
</div>
</div>
</header>
<footer class="text-center">
<div class="footer-above">
<div class="container">
<div class="row">
<div class="footer-col col-md-4">
<h3>Location</h3>
<p>3481 Melrose Place
<br>Beverly Hills, CA 90210</p>
</div>
<div class="footer-col col-md-4">
<h3>Around the Web</h3>
<ul class="list-inline">
<!-- some social networks -->
</ul>
</div>
<div class="footer-col col-md-4">
<h3>About Freelancer</h3>
<p>Freelance is a free to use, open source Bootstrap theme created by Start Bootstrap.</p>
</div>
</div>
</div>
</div>
<div class="footer-below">
<div class="container">
<div class="row">
<div class="col-lg-12">
Copyright © Author
<?php echo date( "Y"); ?>
</div>
</div>
</div>
</div>
</footer>

The way Bootstrap sees how you want to change sizes for different screen sizes are in the column size identifiers. And each number is a fraction of 12.
<div class="footer-col col-md-4">
means you want the footer to take 4/12 of the screen on devices medium or higher. To designate that you want it to be different on different sizes, you would put something like
<div class="footer-col col-md-4 col-sm-12">
to mean that you want it to take up 4/12 of the screen on medium devices or larger, and 12/12 of the screen on small devices up to medium.

You have inline styling on your header <img> tag.
<img class="img-responsive" src="<?php echo base_url(); ?>assets/img/simple_img.png" alt="" style="height: 200px;">
I would recommend trying to use a new class on that <img> tag, then apply a new #media query to adjust height for different screen sizes.
Also, having the .img-responsive class on that element may also be conflicting with the inline height styling.

Add the class "position-relative"
<!-- Footer Starts -->
<div class="container-fluid">
<div class="navbar fixed-bottom position-relative">
<p>You Footer Content<p>
</div>
</div>
<!-- Footer ends -->
Works in Bootstrap v4.3

HTML/JavaScript: Sidebar expand/collapse button

So I'm using this "Color Admin Responsive Admin Template" (http://wrapbootstrap.com/preview/WB0N89JMK) and I have a sidebar menu, and I have the expand/collapse button displaying, but the actual function is not working. I'm not sure exactly why it isn't working, I got the function from the template. I'm pretty new to JavaScript but I think everything that I needed to change on my specific HTML matches the function.
HTML
<!--sidebar left start-->
<!-- begin #sidebar -->
<div id="sidebar" class="sidebar">
<!-- begin sidebar scrollbar -->
<div data-scrollbar="true" data-height="100%">
<!-- begin sidebar user -->
<ul class="nav">
<li class="nav-profile">
<div class="info">
Matt Smith
<small>Manager</small>
</div>
</li>
</ul>
<!-- end sidebar user -->
<ul class="nav">
<!-- begin sidebar minify button -->
<li><i class="fa fa-angle-double-left"></i></li>
<!-- end sidebar minify button -->
</ul>
</div>
<!-- end sidebar scrollbar -->
</div>
<!--sidebar left end-->
JavaScript
var handleSidebarMinify = function() {
$('[data-click=sidebar-minify]').click(function(e) {
e.preventDefault();
var sidebarClass = 'page-sidebar-minified';
var targetContainer = '#page-container';
if ($(targetContainer).hasClass(sidebarClass)) {
$(targetContainer).removeClass(sidebarClass);
if ($(targetContainer).hasClass('page-sidebar-fixed')) {
generateSlimScroll($('#sidebar [data-scrollbar="true"]'));
}
} else {
$(targetContainer).addClass(sidebarClass);
if ($(targetContainer).hasClass('page-sidebar-fixed')) {
$('#sidebar [data-scrollbar="true"]').slimScroll({destroy: true});
$('#sidebar [data-scrollbar="true"]').removeAttr('style');
}
// firefox bugfix
$('#sidebar [data-scrollbar=true]').trigger('mouseover');
}
$(window).trigger('resize');
});
};
http://jsfiddle.net/BootstrapOrBust/71og00ev/1/

You do not include jQuery library in your html. I've added check for JQuery at the top of your code:
alert(typeof jQuery !== "undefined")
it returns false that means you don't add JQuery. You can see the Uncaught ReferenceError: $ is not defined error on browser console. Updated JSFiddle

You can do this (without an animation) without any javascript at all, using the css's :hover.
EDIT: I just realised you wanted to control the expansion and collapse with buttons. This answer doesn't address that, but I'll leave it here anyway as an alternative.
JSFiddle: http://jsfiddle.net/2byg62z4/
<style>
body { margin: 0; }
#sidepanel
{
position: absolute;
min-width: 30px;
height: 60%;
top: 20%;
left: 0;
}
#bar
{
display: table;
background-color: #999999;
color: white;
width: 30px;
height: 100%;
text-align: center;
}
#bar div
{
display: table-cell;
vertical-align: middle;
}
#panel
{
display: none;
background-color: #999999;
color: white;
width: 300px;
height: 100%;
text-align: center;
}
#panel div
{
display: table-cell;
vertical-align: middle;
}
#sidepanel:hover #bar { display: none; }
#sidepanel:hover #panel { display: table; }
</style>
<div id='sidepanel'>
<div id='bar'>
<div>
><br>><br>>
</div>
</div>
<div id='panel'>
<div>
stuff
</div>
</div>
</div>