Question

I’m trying to use the jquery ui switchClass method. Right now it works as such:

$("#top_section").switchClass( "top_section", "pt_figures", 300);

What I’d like to change it to is instead of removing only top_section, I’d like to remove all classes then add pt_figures.

it works here:

$("#close_icon").click(function() {
$("#top_section").removeClass();
$("#top_section").addClass( "top_section", 300);

setTimeout(function() {
  $('#images').empty();
}, 350);

});

but not here:

$("#pt_figures").click(function() {


$('#images').empty();

$('#images').css({
  paddingLeft: 150,
  paddingRight: 0
});
$('#controls').css({
  width:700,
  marginLeft:150
});
$('#info').css({
  width:660,
  marginLeft:150
});

var id = $(this).attr('id');

$("#info_header").load(id +"_header.txt");
$("#content_1").load(id +"_1.txt");
$("#content_2").load(id +"_2.txt");
$("#content_3").load(id +"_3.txt");


$("<img>", { src: "http://www.klossal.com/figures_doc.jpg" }).appendTo("#images"); 
$("<img>", { src: "http://www.klossal.com/figure_front.png" }).appendTo("#images"); 
$("<img>", { src: "http://www.klossal.com/figure_back.jpg" }).appendTo("#images");

$('html, body').animate({
  scrollTop: 0
}, 300);



$("#top_section").removeClass();
$("#top_section").addClass( "pt_figures", 300);


});

Answer 1

Try removing all classes, add the class you want to switch out, and switch it with the class you want in:

    $(#top_section).removeClass();
    $(#top_section).addClass('top_section');
    $(#top_section).switchClass('top_section', 'pt_figures', 300);

demo