单击按钮时隐藏/显示隐藏的div

Question

So i've been working on this for a few days and just when I thought it was perfect I had to restructure the entire page and now i'm stuck. I have three images with buttons underneath each. Any time a button is clicked I need it to display the hidden content at the bottom of the page and hide any content that was visible. I also need the page to jump down so that the top of the div is at the top of the window. Here is what I have:

 $("#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> 

Answer 1

You seem to be using both jQuery and raw DOM manipulation. I think you should pick one (probably jQuery) and stick with it. The following should work:

 $("#Template1").click(function() { $('#content1').toggle(); }); 

 .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%; } .Template1, .Template2, .Template3 { 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;" class="Template1" id="content1">sample demo txt two 2</div> <div align="center" style="padding-top:150px;" class="Template2" id="content2">sample demo txt two 3</div> <div align="center" style="padding-top:150px;" class="Template3" id="content3">sample demo txt two 4</div> </div> 

Answer 2

I put the code you provided into JSFiddle to play around with it. As noted in the other answer, you seemed to be mixing vanilla JS and jQuery, and also were missing the crucial functions (animating the window) that you needed.

The main thing I added to your code is an ID on the div that holds each hidden content block. This allowed me an easy way to target that container for JS functions. My JS then became this:

$("div[id^=Template]").click(function() {
    //Set a variable with this clicked item ID
    var id = $(this).attr('id');

    //Set a selector that points to the hidden content with the same name as this
    var theContent = $('#contents').find('.' + id);

    //Hide all the hidden stuff before revealing what is clicked
    $('#contents').children().hide();

    //Show the correct content based on this Div ID
    theContent.show();

    //Animate the body scroller down to the now revealed content
    $('body').animate({ scrollTop: $('#contents').offset().top }, 'fast');
});

This function looks at all your "Template" divs that you would like to be clickable and then it takes the ID of what is clicked and starts doing its thing (I tried to comment it for clarity).

The entire, working JSFiddle is here: https://jsfiddle.net/your37or/

Good luck!