jQuery show specific div animated only on click of link

I have to display the content in following way

Total Sales: 12345           Show Details                 

When someone click "Show Details" (which is <a> tag), another div should show up which will contain other data (and show details should toggle to hide details, reversing the functionality to hide div)

Need to be done using jQuery, with s开发者_开发知识库ome animations (if possible).

How can I achieve this

Help appreciated

Thanks

---

For this example the id of the link 'showDetails' and the div 'divDetails'.

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

jQuery has some effects including show(), hide(), fadeIn(), fadeOut(), slideUp(), slideDown() and others. See here for more examples. The amount in the function is the length of time it takes to complete in milliseconds. You can also specify a word instead of milliseconds 'slow' and 'fast'.

Other effects to note are toggle ones which toggle it so you don't have to know what it is currently.

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

---

let's suppose your show details tag id is "abc" and detail div has id as "divDetail" that is display:none so code will be as follows

$("#abc").click(function(this){ this.text="Hide Details"; $("#divDetail").toggle(); });

---

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

---

Well first you need a div holding the details initially set in document ready with:

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

then to the anchor

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

for animations you can use instead of toggle():

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

Edit: For animations use the code Timothy suggested, using the .is(':visible')