After spending several days working on this project, just when I thought it was perfect, I had to completely restructure the entire page. Now I'm feeling stuck and in need of some help. The issue is that I have three images with buttons underneath each of them. When a button is clicked, I want it to display hidden content at the bottom of the page while hiding any previously visible content. Additionally, I want the page to automatically scroll down so that the top of the div aligns with the top of the window. Here is what I currently have in terms of code:
$("#Template1").click(function() {
var div = document.getElementById('#content1');
if (div.style.display !== 'none') {
div.style.display = 'none';
}
else {
div.style.display = 'block';
}
});.cell1 {
display: table;
text-align: center;
table-layout: fixed;
border-spacing: 10px;
width: 100%;
}
.cell2 {
display: table;
text-align: center;
table-layout: fixed;
border-spacing: 10px;
width: 100%;
}
(Column {
vertical-align: top;
width: 500px;
display: table-cell;}
#img1,
#img2,
#img3 {
display:inline-block;
align:center;
padding: 10px 20px 10px 20px;
vertical-align:top
}
#Template1,
#Template2,
#Template3 {
margin-top:14px;
background-color:#cb3778;
font-family:Arial;
font-size:20px;
width:260px;
float:center;
color:#FFF;
cursor:pointer;
}
.Template0 {
display:block;
clear:both;
width:100%;}
#content1,
#content2,
#content3 {
display:none;
clear:both;
width:100%;}
@media only screen and (max-width:600px){
*[class*="mobile-only"]{
display:block !important;
max-height:none !important;}
.mobile{
display:block !important;
margin-top:14px !important;
margin-bottom:14px !important;
margin-left:0px !important;
padding:10px 0 10px 0 !important;}
.mobile-img{
display:block !important;
Width:100% !important;
align:center !important;}
.mobile-column{
display:block !important;
Width:100% !important;
align:center !important;}<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<div align="center">
<div class="Column mobile-column">
<div class="cell1">
<img width="400" height="355" border="0" src="col1-2.jpg" class="mobile-img" alt="Template 1" />
</div>
<div class="cell2 mobile" id="Template1">Template1</div>
</div>
<div class="Column mobile-column">
<div class="cell1">
<img width="400" height="355" border="0" src="6pack-1.jpg" class="mobile-img" alt="Template 2" />
</div>
<div class="cell2 mobile" id="Template2">Template2</div>
</div>
<div class="Column mobile-column">
<div class="cell1">
<img width="400" height="355" border="0" src="hero-1col.jpg" class="mobile-img" alt="Template 3" />
</div>
<div class="cell2 mobile" id="Template3">Template3</div>
</div>
</div>
<div align="center">
<div align="center" style="padding-top:150px;" id="content1">sample demo txt two 2</div>
<div align="center" style="padding-top:150px;" id="content2">sample demo txt two 3</div>
<div align="center" style="padding-top:150px;" id="content3">sample demo txt two 4</div>
</div>