I use accordion box comes from Jquery UI. It doesnt work.
<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css" />
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
Here is the event handler I use accodion box
$("#skillcat").click(function(e) {
//var submit_val = new Array();
//$('#accordion1').accordion('destroy');
e.preventDefault();
var ids = [];
var el = $('[name*=check_subjects]:checked'); //Get all checked Checkboxes
el.each(function () {
ids.push($(this).attr('id')); //get the Id from each checkbox
});
$.ajax( {
type : "POST",
dataType : "json",
//
url : "./wp-admin/admin-ajax.php",
data : {
action : 'each_category',
check_subjects : ids
},
success : function(data) {
alert(data);
$('#accordion1').html(data);
$("#accordion1").accordion({ active: 0 });
$("#accordion1").css("font-family", "'Trebuchet MS', Arial, Helvetica, sans-serif");
$("#accordion1").css("font-size", "0.9em");
}
});
});
place that I suppose to render accodion
<div id="accordion1" >
</div>
However, when I click the button first time I get the data to alert box. It render conent but it doesn't apply accodion box. I have another accordion on same page but it works.
If I click another button on same page and try submitting above button, I get data to alert but it won't render the html to browser.
where I have done the mistake?
Ajax is working.
Update
when I add this code
$('#accordion1').accordion('destroy');
before
$('#accordion1').html(data);
Accodion starts to work. But as usual it isnot working second time.