Ajax load удваивает контент

Question

У меня есть сайт, построенный с использованием wordpress в качестве cms, а индекс имеет длинный список заголовков в стиле согласования, и как только вы нажимаете на этот заголовок, контент для этого сообщения загружается через ajax на индексную страницу.

У меня возникла проблема, что, когда заголовок снова щелкнут, он снова загружает содержимое сообщения, и если вы нажмете другой заголовок, он не будет закрыт и удалит предыдущий, который был нажат.

Я новичок в работе с ajax и не уверен, как это сделать. Есть ли способ удалить содержимое после того, как заголовок будет нажат второй раз, чтобы закрыть аккордеон или другой заголовок, чтобы щелкнуть его, чтобы развернуть и открыть. Живой сайт находится здесь: http://www.minervasydney.com/

Ниже приведен код для моего ajax и его части в моем индексном файле, в котором перечислены заголовки. Если у кого-то есть идеи, мы будем очень благодарны. Спасибо!

AJAX

 $("a.exhibitionInformation").on("click", function(event) { 

     var exhibitionContainer = $(this).parent(".exhibition"); 
     var url = $(this).attr("href"); 
     var doc = $(this).next(".exhibitionDocuments"); 
     var title = convertToSlug($(this).text().split("\n")[1]); 
     var slug = $(this).attr("data-slug"); 
     $(this).toggleClass("selected"); 

     if($(doc).is(':not(:hidden)')) { 
      $(doc).slideToggle(); 
     } else {    


      $.ajax({ 
       url: url, 
       type: "GET", 
       success: function(data) { 
        var content = $(data).find(".single-document");     
        $(doc).append(content).slideToggle(300);      
        $("html, body").animate({ scrollTop: exhibitionContainer.offset().top - 26 }); 
        window.location.hash = slug; 
       }   
      }); 

     } 

     event.preventDefault(); 
    }); 


    //ajaxstarStop Loading 
    $(document).ajaxStart(function() { 
     $("#loading").fadeIn(100); 
    }); 

    $(document).ajaxStop(function() { 
     $("#loading").fadeOut(); 
    });  


    function convertToSlug(Text) 
    { 
     return Text 
      .toLowerCase() 
      .replace(/ /g,'-') 
      .replace(/[^\w-]+/g,'') 
      ; 
    } 

INDEX

  <section class="exhibition"> 

      <a class="exhibitionInformation" href="<?php the_permalink(); ?>" data-slug="<?php echo $post->post_name; ?>"> 
       <span class="dates"><?php echo types_render_field("dates", array("argument1"=>"value1")); ?></span> 
       <span class="opening"><?php echo types_render_field("opening", array("argument1"=>"value1")); ?></span> 
       <span class="title">&#8220;<?php the_title(); ?>&#8221;</span> 
       <span class="artist"><?php echo types_render_field("artist", array("argument1"=>"value1")); ?></span> 
       <span class="extra"><?php echo types_render_field("extra", array("argument1"=>"value1")); ?></span> 
      </a> 


      <article class="exhibitionDocuments"> 

      </article> 

     </section> 

Answer 1

В вашей просьбе АЯКС:

$.ajax({ 
    url: url, 
    type: "GET", 
    success: function(data) { 
     var content = $(data).find(".single-document");     
     $(doc).append(content).slideToggle(300);      
     $("html, body").animate({ scrollTop: exhibitionContainer.offset().top - 26 }); 
     window.location.hash = slug; 
    }   
}); 

На второй строке под успех, изменить .append к .html.

Линия должна теперь быть:

$(doc).html(content).slideToggle(300); 

Она будет загружать содержимое и удалить предыдущую, если там было.

---

EDIT

Чтобы закрыть ранее открыл .exhibitionDocuments:

$(document).find(".exhibitionDocuments").hide(); 

разместить его на верхней части вашего успеха обратного вызова.
      (перед var content = $(data).find(".single-document");)