Skip to content

Instantly share code, notes, and snippets.

@dantetesta

dantetesta/show hide elements - wordpress.js

Created October 16, 2023 11:36
Show Gist options
  • Star 2 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save dantetesta/92c912a0ac713383b15b58499ec781a6 to your computer and use it in GitHub Desktop.
Save dantetesta/92c912a0ac713383b15b58499ec781a6 to your computer and use it in GitHub Desktop.
Download ZIP
Raw
show hide elements - wordpress.js
<style>
#conteudo-2, #conteudo-3, #conteudo-4 {
display: none;
}
</style>
<script>
// Ao carregar a página
jQuery(document).ready(function() {
// Evento de clique para os botões
jQuery('.btn-click a').on('click', function(e) {
// Impede o comportamento padrão do clique
e.preventDefault();
// Obtém a posição atual de rolagem
var currentScroll = jQuery(window).scrollTop();
// Obtém o valor do href
var targetId = jQuery(this).attr('href');
// Oculta todos os elementos com um efeito de fade out
jQuery('#conteudo-1, #conteudo-2, #conteudo-3, #conteudo-4').fadeOut();
// Usa setTimeout para garantir que o fadeIn comece após o fadeOut terminar
setTimeout(function() {
// Mostra apenas o elemento desejado com um efeito de fade in
jQuery(targetId).fadeIn();
// Fixa a posição de rolagem para a posição atual
window.scrollTo(0, currentScroll);
}, 400);
});
});
</script>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment