jquery - How to make accordian display after ajax call is completed -

on click of accordian doing ajax call , appending data accordian contents

the accoridian working fine without ajax call , please see jsfiddle here (without ajax call)

http://jsfiddle.net/cze3q/1145/

but when integrated ajax accordian , accordian not opening

http://jsfiddle.net/cze3q/1144/

this code

$(function() {   $('#accordion .content').hide();   $('#accordion h2').click(function() {     var clcikedid = $(this).attr('id');     var ajaxcall = $.ajax({       url: 'test',       success: function(data) {         alert('ajx call completed');       }     });     ajaxcall.done(function() {       if ($(this).next().is(':hidden')) {         $('#accordion h2').removeclass('active').next().slideup('slow');         $(this).toggleclass('active').next().slidedown('slow');       }     });   }); }); 

could please tell me how resolve issue ??

you have not use this in done function:

if ($('#' + clcikedid).next().is(':hidden')) {     $('#accordion h2').removeclass('active').next().slideup('slow');     $('#' + clcikedid).toggleclass('active').next().slidedown('slow'); } 

you have saved id in clcikedid. use solve issue. value of this not aspect. ajax call object.