Ember 2 - Hide / show content component

I have a component app/components/offer-listing.js:

import Ember from 'ember';

export default Ember.Component.extend({
  isOfferShowing: false,
  actions: {
    offerShow() {
      if (this.get('isOfferShowing')) {
        this.set('isOfferShowing', false);
      } else {
        this.set('isOfferShowing', true);
      }
    }
  }
});

and his template app/templates/components/offer-listing.hbs:

<div class="offer__container">
  <div class="row">
    <div class="gr-3">
      <div class="offer__avatar" style="background-image: url('')"></div>
    </div>
    <div class="gr-9">
      <div class="offer__name" > </div>
      <div class="offer__age" > ans</div>
      
        <div class="offer__description" ></div>
      
        <div class="offer__description" ></div>
      

      
        <div class="+spacer"></div>
        <a class="offer__button"><i class="fa fa-envelope"></i> Contacter par email</a>
        <a class="offer__button"><i class="fa fa-phone"></i> Voir le numéro de téléphone</a>
      
    </div>
  </div>
</div>

which is rendered in app/templates/index.hbs:

The example is working great, however I would like to hide every "more" content when a new one is showing.