Ajouter dynamiquement des éléments pliables

c'est ce que je fais. Espérons que cela aide

HTML

<div id="collapsibleSet" data-role="collapsible-set">
   <div id="ranking1"></div>
</div>

Javascript

$('#ranking1').replaceWith('<div id="ranking1" data-role="collapsible" data-collapsed="false">' + htmlRankings(ranking) + '</div>');
$('#collapsibleSet').find('div[data-role=collapsible]').collapsible({refresh:true});

htmlRankings() est une fonction js qui renvoie le code html que je veux à l'intérieur de la réductible div.
il peut être quelque chose comme ceci

<h3>11</h3>
<span>test</span>

Ce code est pour perl, vous pouvez la modifier pour n'importe quel langage de programmation.

 <a href="javascript:collapsible('$div_instance','$imageID')">
         <IMG id='$imageID' SRC='$imagePath' alt='(Expand /Collaspe Section' title='Expand /Collaspe' width=10 height=10>
          $display_header <br/></a>
          <div id=$div_instance name=$div_instance 
           style="overflow:hidden;display:$display_option;margin-left:30px; margin-top:20px;">
                                       <-- your content -->
            </div>
<script language="JavaScript" type="text/javascript">
    <!--
     function collapsible(theID,imageID) {
          var elemnt = document.getElementById(theID);
          var imageObject =document.getElementById(imageID);
          if(elemnt.style.display == 'block') {
               elemnt.style.display ='none';
               imageObject.src='images/expand_icon.gif';
           }
           else{
           elemnt.style.display ='block';
           imageObject.src='images/expand_icon_down.gif';
           }

    }
    //-->
    </script>

REF: http://www.ssiddique.info/simple-javascript-to-create-dynamic-collapsible-section.html

vous pouvez actualiser la grille en utilisant le code suivant

$('#element').collapsibleset('refresh');

Espère que cela aide

Mieux que réductible est updatelayout c'est dans les docs. En bref...

Cet événement est déclenché par composants à l'intérieur du cadre que dynamiquement afficher/masquer de contenu, et est conçu comme un mécanisme générique pour informer les autres composants qu'ils peuvent avoir besoin de mettre à jour leur taille ou leur position. Dans le cadre de cet événement est déclenché sur l'élément dont le contenu a été montré/caché, et bulles tout le chemin jusqu'à l'élément de document.

$('div[data-role=collapsible]')
    .trigger( 'updatelayout' );
    //.collapsible();

Voici un exemple de ce que j'ai fait pour modifier dynamiquement mon réductible. J'ai eu quelques tableaux que je nécessaire à l'affichage de l'en-tête, et puis j'avais besoin d'une grille dans chaque réductible jeu de 2 côtés, l'un pour la question et une réponse.

   var inputList = '';
var count = 0;
var divnum = 999;
var collit = 'false';
inputList += '<div data-role="content">';
inputList += '<div id="fb_showings_collapse" data-role="collapsible-set" data-theme="b">';
$.each(fbFullStrArray, function(index, item) { 
//set questions and answers for each appt
getsetApptFback(fbStrApptArray[index]);
//write the html to append when done
inputList += '<div data-role="collapsible" data-collapsed="'+collit+'">';
inputList += '<h3>'+fbFullStrArray[index]+'</h3>';
inputList += '<div id="g'+divnum+'" class="ui-grid-a">';
inputList += '<div id="gb'+divnum+'" class="ui-block-a">';
inputList += '<div id="fbq'+index+'"><ol>';
$.each(fbQidArray, function(ind,it) {
inputList += '<li>'+fbQuestionArray[ind]+'<b></b></li>';
});
inputList += '</ol></div></div>'
inputList += '<div id="ga'+divnum+'" class="ui-block-b">';
inputList += '<div id="fba'+index+'"><ul>';
$.each(fbQidArray, function(ind,it){
inputList += '<li>'+fbAnswerArray[ind]+'<b></b></li>';
});
inputList += '</ul></div></div></div></div>';
collit = "true";
divnum++;
count++;
});
inputList += '</div></div>';
$('#fb_showings_collapse [role=collapsible-set]').text('');
$('#fb_showings_collapse [role=collapsible]').text('');
if (count > 0) {
$('#fb_showings_collapse [role=collapsible]').remove();
$('#fb_showings_collapse').append(inputList).collapsibleset('refresh');
}
else if (count == 0){
inputList = 'Sorry! No Showings To Show Feedback For!';
$('#fb_showings_collapse [role=collapsible-set').remove();
$('#fb_showings_collapse [role=collapsible]').text(inputList);
}