Beginner trying to make collapsible Components

Learning Team
1

I am trying to make components collapse very similar to accordion style found in ember-accordion package. I am working on Ember 1.13 and wasn’t able to get the ember-accordion package to work for some reason. Ideally, the many components I have on the page would collapse as the user scrolls down on the page. The uncollapsed version would look like this:

775×852 62.5 KB

I am unable to post the second image because I am new to these forums, but if you can imagine: each of those components would become a smaller and more succinct version of itself as the user scrolls down.

What is the best way to approach this? By using the ember jQuery object? Or is there a 1.13 compatible package that will make this easy for me? I tried using liquid-fire as well, but was unsuccessful since I don’t have an outlet on the components.

2

I can’t remember what plugins are available for 1.13 (I’m guessing there’s something restricting you from upgrading) but you can write your own system

I usually implement accordions by toggling a class on the component which animates the expand/collapse with CSS, i.e. is-open. You can achieve this by binding a class conditionally with classNameBindings. Then you have control over that class by setting a property to true or false, e.g.

export default Ember.Component.extend({
  classNameBindings: ['isOpen:is-open'],
  isOpen: true,

  open() {
    this.set('isOpen', true);
  },

  close() {
    this.set('isOpen', false);
  },
});

You’ll need something to watch the position of elements as you scroll to trigger the accordion. Have a look at ember-in-viewport. You could wire up didEnterViewport and didExitViewport to call open and close respectively

1 Like