<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="style.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="script.js"></script>
</head>
<body>
<footer>
<div class="container">
<div class="row">
<div class="col-md-4 col-sm-4">
<div data-toggle="collapse" class="taber" data-parent="#accordion" href="#collapseOne" aria-expanded="false" aria-controls="collapseOne">
View Location
</div>
<div id="collapseOne" class="panel-collapse collapse in" role="tabpanel" aria-labelledby="headingOne">
<ul>
<li>Home</li>
<li>Home</li>
<li>Home</li>
<li>Home</li>
<li>Home</li>
</ul>
</div>
</div>
<div class="col-md-4 col-sm-4">
<div class="taber" data-toggle="collapse" data-parent="#accordion" href="#collapsetwo" aria-expanded="false" aria-controls="collapseOne">
View Location
</div>
<div id="collapsetwo" class="panel-collapse collapse in" role="tabpanel" aria-labelledby="headingOne">
<ul>
<li>Home</li>
<li>Home</li>
<li>Home</li>
<li>Home</li>
<li>Home</li>
</ul>
</div>
</div>
<div class="col-md-4 col-sm-4">
<div class="taber" data-toggle="collapse" data-parent="#accordion" href="#collapsethree" aria-expanded="false" aria-controls="collapseOne">
View Location
</div>
<div id="collapsethree" class="panel-collapse collapse in" role="tabpanel" aria-labelledby="headingOne">
<ul>
<li>Home</li>
<li>Home</li>
<li>Home</li>
<li>Home</li>
<li>Home</li>
</ul>
</div>
</div>
</div>
</div>
</footer>
<script src="script.js"></script>
</body>
</html>
$(document).ready(function(){
$("[data-toggle='collapse']").removeAttr("data-toggle");
if($(window).width()<768)
{
$(".taber").attr("data-toggle","collapse");
$('.collapse').collapse("hide");
}
});
/* Styles go here */
footer
{
background:#000;
padding:4% 0;
}
footer ul li,.taber
{
color:#fff;
list-style:none;
margin-bottom:10px;
font-size:16px
}
@media (max-width:723px)
{
.taber
{
border-bottom:1px solid #ccc;
padding-bottom:10px;
cursor:auto;
}
.taber.collapsed:after {
content: "+";
float: right;
font-size: 22px;
margin-right: 10px;
}
.taber:after {
content: "-";
float: right;
font-size: 22px;
margin-right: 10px;
}
.taber {
border-bottom: 1px solid #ccc;
cursor: pointer; padding-bottom: 10px;
padding-left: 15px;
padding-right: 15px;
}
.panel-collapse{
padding-left: 15px;
padding-right: 15px;
}
footer >.container
{
padding-left: 0;
padding-right: 0px;
}