Ajax Load verdoppelt Inhalt

Question

Ich habe eine Website mit WordPress als cms gebaut und der Index hat eine lange Akkordeon Stil Liste von Titel und sobald Sie auf diese Überschrift klicken, wird der Inhalt für diesen Beitrag über Ajax in die Indexseite geladen.

Ich habe das Problem, dass wenn die Überschrift erneut angeklickt wird, lädt sie den Beitrag Inhalt wieder und wenn Sie auf eine andere Überschrift klicken, wird nicht geschlossen und entfernen Sie die vorherige, die angeklickt wurde.

Ich bin neu in der Arbeit mit Ajax und unsicher, wie man das beheben kann. Gibt es eine Möglichkeit, den Inhalt zu entfernen, nachdem die Überschrift ein zweites Mal angeklickt wurde, um das Akkordeon zu schließen, oder auf eine andere Überschrift geklickt wird, um sie zu erweitern und zu öffnen. Live-Site ist hier: http://www.minervasydney.com/

Unten ist der Code für meine Ajax und der Teil in meiner Indexdatei, die die Überschriften auflistet. Wenn jemand Ideen hat, würde es sehr geschätzt werden. Vielen Dank!

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

Innerhalb Ihrer Ajax-Anfrage:

$.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; 
    }   
}); 

In der zweiten Zeile unter Erfolg, .append zu .html ändern.

sollte die Linie jetzt sein:

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

Es den Inhalt geladen wird und früheren entfernen, wenn war da.

---

EDIT

schließen ein zuvor .exhibitionDocuments geöffnet:

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

Platz es oben auf Ihren Erfolg Rückruf.
      (rechts vor var content = $(data).find(".single-document");)