jQuery montrent div spécifiques animés uniquement sur clic de lien

Question

je dois afficher le contenu de manière suivante

Total Sales: 12345   Show Details     

Quand quelqu'un cliquez sur « Afficher les détails » (ce qui est < une balise >), un autre div devrait apparaître qui contiendra d'autres données (et les détails du show devraient basculer pour cacher les détails, inversant la fonctionnalité pour masquer div)

A faire en utilisant jQuery, avec quelques animations (si possible).

Comment puis-je obtenir ce

Aide apprécié

Merci

Answer 1

Pour cet exemple, l'identifiant du lien 'showDetails' et le div 'divDetails'.

$('#showDetails').click(function(){ 
    if ($('#divDetails').is(":visible"){ 
     $('#divDetails').hide(250); 
    } else { 
     $('#divDetails').show(250); 
    } 
}); 

jQuery a des effets, y compris show(), hide(), fadeIn(), fadeOut(), slideUp(), slideDown() et d'autres. Voir here pour plus d'exemples. Le montant de la fonction est la durée nécessaire pour terminer en millisecondes. Vous pouvez également spécifier un mot au lieu de millisecondes 'lent' et 'rapide'.

Les autres effets à noter sont ceux qui basculent entre eux pour que vous ne deviez pas savoir ce qu'il est actuellement.

$('#showDetails').click(function(){ 
    $('#divDetails').fadeToggle(250); 
}); 

Answer 2

supposons que votre Afficher les détails ID tag est "abc" et détail div a id comme "divDetail" qui est display: none si le code sera le suivant

$ ("# abc") cliquez sur (function (this) { this.Text = "Masquer les détails";.. $ ("# de divDetail") toggle(); });

Answer 3

$('a.showdetails').toogle(function(){ 
    $('.your-div').show(); 
}, 
function(){ 
    $('.yourdiv').hide(); 
}); 

Answer 4

Eh bien d'abord vous avez besoin d'un div contenant les détails initialement prévue dans le document prêt avec:

$(document).ready(function() { 
     $('#myDetails').hide(); 
    }); 

puis à l'ancre

<a href="#" onclick="$('#myDetails').toggle();">Show Details</a> 

pour les animations que vous pouvez utiliser à la place de toggle():

fadeIn('slow'); or fadeOut('slow'); 
slideUp('normal'); slideDown('fast'); 

Éditer: Pour les animations utiliser le code suggéré par Timothy, en utilisant le .is (': visible')