Question

In a page there is a div (#example_div) that toggles a class when click on it using this code:

$(document).ready(function() {
    $("#parent_div").on('click', '.current_style', function () {
    $(this).toggleClass("new_style");
    });
}); 

Below the div #example_div there is a div called #load_content.

I want to find a solution to when a visitor click on the #example_div it toggles new style just as usually, but at the same time I want to load in some content to #load_content from another page. Then when untoggle #example_div, the loaded content in #load_content removes.

Is this possible?

Thanks.

Answer 1

$(document).ready(function() {
 $("#parent_div").on('click', '.current_style', function () {
 $(this).toggleClass("new_style");
 if( $(this).hasClass("new_style")) {
    // load content eg: $("#load_content").html("xyz");
 }
 else{
     $("#load_content").html("");
 }
 });
});