Ancrer div masqué lorsque le bouton est cliqué

Question

J'ai trois boutons qui contiennent tous du contenu masqué. Quand un bouton est cliqué, je veux que ce contenu spécifique affiche et cache tout autre contenu. Je veux aussi que l'écran descende au contenu qui s'affiche en cliquant sur le bouton.

Qu'est-ce que j'ai besoin d'ajouter au JavaScript pour le faire descendre au contenu? Voici ce que j'ai:

$("#wrap div[id^='Template']").click(function() { 
 
    var active = $(this).attr('id'); 
 
    $(this).siblings("[class^='Template']:not(." + active + ")").hide(); 
 
    $(this).siblings("." + active).slideToggle(); 
 
});

#Template2, 
 
#Template3, 
 
#Template4 { 
 
    margin-top: 24px; 
 
    margin-left: 19% !important; 
 
    background-color: #cb3778; 
 
    padding: 0 30px 0 30px; 
 
    font-family: Arial; 
 
    font-size: 20px; 
 
    line-height: 36px; 
 
    float: left; 
 
    color: #FFF; 
 
    cursor: pointer; 
 
    -webkit-border-radius: 8; 
 
    -moz-border-radius: 8; 
 
    border-radius: 8px; 
 
} 
 
.Template2, 
 
.Template3, 
 
.Template4 { 
 
    display: none; 
 
    clear: both; 
 
    width: 100%; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 
<div style="display: block;" id="wrap"> 
 

 
    <div id="Template2">Sample 2</div> 
 
    <div id="Template3">Sample 3</div> 
 
    <div id="Template4">Sample 4</div> 
 

 
    <div align="center" style="padding-top:40px;" class="Template2"> 
 
    <br> 
 
    <br> 
 
    <br> 
 
    <br> 
 
    <br>sample demo txt two 2</div> 
 
    <div align="center" style="padding-top:40px;" class="Template3"> 
 
    <br> 
 
    <br> 
 
    <br> 
 
    <br> 
 
    <br>sample demo txt two 3</div> 
 
    <div align="center" style="padding-top:40px;" class="Template4"> 
 
    <br> 
 
    <br> 
 
    <br> 
 
    <br> 
 
    <br>sample demo txt two 4</div> 
 
</div>

Answer 1

Essayez d'ajouter ceci à la fin de la fonction de clic.

$("body, html").animate({ 
    scrollTop: $(this).siblings("." + active).position().top 
}); 

Answer 2

Comment l'utilisation de pseudo-classe CSS :target. Voir: http://codepen.io/zvona/pen/YwdGrW

.content { 
    visibility: hidden; 
} 

.content:target { 
    visibility: visible; 
}