JQuery Accordion: Div div ouverts pour rencontrer le contenu (image de référence donnée)

Question

Je vais y aller droit. Voici une photo de ce dont je parle dans le titre: JQuery Accordion Bug. Remarquez comment le contour de la div se coupe sur le côté droit pour correspondre au contenu de ce que j'ai sélectionné. J'ai bloqué le contenu de la div dans Paint, pour des raisons de confidentialité, mais vous avez l'idée. Cela arrive quand j'ai déjà un autre élément ouvert, et essayez d'en ouvrir un autre. Si tous les éléments sont fermés et que je clique pour ouvrir un élément, cela semble correct (en fait, si vous regardez de près, il se coupe et se réajuste correctement très rapidement). Ce n'est que lorsqu'un élément est déjà ouvert, et je clique sur un autre est ce problème. Voici le code que je utilise pour mettre en place l'accordéon:

$('#demo_accordion').accordion({ 
    header: "h3", 
    active: false, 
    autoHeight: false, 
    collapsible: true 
}); 

Notez que pliable est définie sur true, donc je ne permettant un élément d'ouvrir à la fois. Maintenant, voici le code html J'utilise (sous forme abrégée):

<div id="demo_accordion"> 
    <% foreach (var entry in Entries) %> 
    <% { %> 
      <div> 
       <h3><a href="#"><%= entry.EntryDate %> - Testing</a></h3> 
       <table> 
        <!-- table code here --> 
       </table> 
      </div> 
    <% } %> 
</div> 

J'utilise .NET en ligne C# ainsi, dans le <% et%>. Je ne sais pas si c'est quelque chose de CSS ou quoi, mais je suis sûr que je suis la démo en ligne exactement.

Toute aide serait appréciée. Merci.

Answer 1

Si vous regardez le docs, il vous donne le formatage html pour l'accordéon. Ce que vous voulez est quelque chose de plus comme ceci où la table est dans un élément de bloc, comme un div et ce div vient après l'en-tête. Avoir un div encapsulant autour de chaque partie d'accordéon est inutile.

Format doit être:

<div id="demo_accordion"> 
    <% foreach (var entry in Entries) %> 
    <% { %> 
     <h3><a href="#"><%= entry.EntryDate %> - Testing</a></h3> 
     <div> 
     <table> 
      <!-- table code here --> 
     </table> 
     </div> 
    <% } %> 
</div> 

devrait résoudre votre problème.