How To Correctly Append Dynamic Getuikit Accordions?

I'm trying to dynamically append UIKit Accordions into a sortable list. The initial items (accordions) are working, but the dynamically appended is not working. HTML

Solution 1:

It looks like what you want to do is:

• Omit the data-uk-accordion attribute.
• Save the object returned from calling UIkit.accordion(element, options).
• After new accordion child elements have been added, call accordion.update(). (assuming you saved the returned object above in a variable called accordion)

For more information about how I arrived at that, check out the related issue on GitHub.

(also posted as an answer on UIKit accordion and ng-repeat doesn't work)

Solution 2:

Try removing the accordion data from the element before you reinitialize it:

$(".uk-margin").removeData("accordion");
UIkit.accordion($(".uk-margin"));

That worked for me when I was writing an angular directive for this.

Solution 3:

try update all items of accordion after add,

var component = UIkit.accordion($('.uk-accordion'));
component.update();

That worked for me.

Solution 4:

I had the same issue but I'm using Meteor. This took me a good hour to get worked out, and I tried several different solutions, including using Template.onRender, Template.onCreated, but to no avail. They all seemed to attempt to initialize the UIKit accordion JS too soon.

I probably should've known better, but the right answer was to put @codermonkeyfuel's code before the end of my template helper, like so:

Template.appsList.helpers({
  myApps: function() {
    if (Meteor.user() ) {
      console.log("we have a user: " + Meteor.user() );
      var userId = Meteor.userId();
      var user = Meteor.users.findOne(Meteor.userId());
      console.log("userId: " + userId);

      var apps = Meteor.users.findOne({_id: userId}, {
        fields: {
          myApps: 1
        }
      }).myApps;
      // console.log(myApps);return user && apps;
    }

    setTimeout(function() {
      var accordion = UIkit.accordion($('.uk-accordion'), {collapse: false});
      accordion.update();
    }, 1000)
  }
});

My head was thinking it was a timing issue with the rendering. In retrospect, the actual solution makes perfect sense. Hope it's useful for anyone using UIKit with MeteorJS. meteorjavascriptuikit

Share