title: CSS Fold items up & down animation
body: <p>I have a list of items:</p>
  
  <p><a href="https://i.stack.imgur.com/3ylVc.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/3ylVc.png" alt="enter image description here"></a></p>
  
  <p>Which, I would like to collapse with an animation effect, to just display one item:</p>
  
  <p><a href="https://i.stack.imgur.com/aYnwE.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/aYnwE.png" alt="enter image description here"></a></p>
  
  <p>As you can see, currently it collapses to one item, but the entire component does not collapse.</p>
  
  <p>I am currently just setting the the items opacity to zero:</p>
  
  <p><strong>css</strong></p>
  
  <pre><code>.slide-fade-hide {
    transition: all 1.2s ease-out;
    opacity: 0;
    //height: 2em;
  }
  
  .slide-fade-show {
    transition: all 1.2s ease-in;
    opacity: 1;
    //height: 2em;
  }
  </code></pre>
  
  <p><strong>html</strong></p>
  
  <pre><code>&lt;ion-list&gt;
    &lt;ion-row&gt;
      &lt;ion-col&gt;
        &lt;div id="search"&gt;
          &lt;ion-searchbar class="ion-searchtext" id="ion-searchtext" [(ngModel)]="searchQueryText" (ionFocus)="focusSearch($event)" (change)="onChangeText($event)"
            (ionClear)="onCancelText($event)" (ionInput)="onInputText($event)" placeholder="{{jobType === 0 ? favourite ? 'Market Favourites' : 'Market' : favourite ? 'Postings Favourites' : 'Postings'}}"
            debounce="1"&gt;&lt;/ion-searchbar&gt;
        &lt;/div&gt;
        &lt;!--&lt;div id="pinButton"&gt;&lt;button ion-button (click)="presentPopover()" color="primary"&gt;&lt;ion-icon name="funnel"&gt;&lt;/ion-icon&gt;&lt;/button&gt;&lt;/div&gt;--&gt;
      &lt;/ion-col&gt;
    &lt;/ion-row&gt;
  
    &lt;!--&lt;div *ngIf="showExtraSearch === true"&gt;--&gt;
    &lt;div id="extra-filter-items" class="slide-fade-hide"&gt;
      &lt;ion-row&gt;
        &lt;ion-col&gt;
          &lt;div id="location-filter"&gt;
            &lt;ion-searchbar id="ion-locationbar" [(ngModel)]="searchQueryLocation" (ionClear)="onCancelLocation($event)" (ionInput)="onInputLocation($event)"
              (click)="presentFilterMap()" placeholder="Location" debounce="1"&gt;&lt;/ion-searchbar&gt;
          &lt;/div&gt;
        &lt;/ion-col&gt;
      &lt;/ion-row&gt;
      &lt;ion-row&gt;
        &lt;ion-col&gt;
          &lt;div id="categories-filter"&gt;
            &lt;ion-searchbar id="ion-locationbar" [(ngModel)]="searchQuerySectors" (ionClear)="onCancelSectors($event)" (ionInput)="onInputSectors($event)"
              (click)="presentFilterCategories()" placeholder="Sectors" debounce="1"&gt;&lt;/ion-searchbar&gt;
          &lt;/div&gt;
        &lt;/ion-col&gt;
      &lt;/ion-row&gt;
      &lt;ion-row&gt;
        &lt;ion-col&gt;
          &lt;div id="rating-filter"&gt;
            &lt;ion-searchbar id="ion-locationbar" [(ngModel)]="searchQueryRating" (ionClear)="onCancelRating($event)" (ionInput)="onInputRating($event)"
              (click)="presentFilterRating()" placeholder="Star Rating" debounce="1"&gt;&lt;/ion-searchbar&gt;
          &lt;/div&gt;
        &lt;/ion-col&gt;
      &lt;/ion-row&gt;
      &lt;ion-row&gt;
        &lt;ion-col&gt;
          &lt;div id="time-filter"&gt;
            &lt;ion-searchbar id="ion-locationbar" [(ngModel)]="searchQueryTime" (ionClear)="onCancelTime($event)" (ionInput)="onInputTime($event)"
              (click)="presentFilterTime()" placeholder="Last Online" debounce="1"&gt;&lt;/ion-searchbar&gt;
          &lt;/div&gt;
        &lt;/ion-col&gt;
      &lt;/ion-row&gt;
    &lt;/div&gt;
  &lt;/ion-list&gt;
  </code></pre>
  
  <p><strong>javascript</strong></p>
  
  <pre><code>  showExtraFilters(): void {
      let extraItemsElement = document.getElementById('extra-filter-items');
      if (extraItemsElement) {
        extraItemsElement.className = "slide-fade-show";
      }
    }
  
    hideExtraFilters(): void {
      let extraItemsElement = document.getElementById('extra-filter-items');
      if (extraItemsElement) {
        extraItemsElement.className = "slide-fade-hide";
      }
    }
  </code></pre>
  
  <p><strong>Problem</strong></p>
  
  <p>The items are still present, they just are transparent. </p>
  
  <ol>
  <li><p>So if I click on them, they still respond. </p></li>
  <li><p>Also, they are still taking up space, so that the rest of the dom is still beneath it.</p></li>
  </ol>
  
  <p><strong>Question</strong></p>
  
  <p>How do I allow the items to toggle from 1 item to 5 items with an animation effect as if they are sliding up &amp; down? Also, so they also free up the space beneath them when they are up.</p>
  
  <p>I did look at <a href="https://cssanimation.rocks/list-items/" rel="nofollow noreferrer">this example</a> (see "Slide down &amp; Fade"), but as you can see above, this does not achieve what I need.</p>
  
  <p>Thanks</p>
  
  <p>p.s. I am using Ionic2, so don't want to use any other Javascript frameworks like JQuery (just plain javascript and css).</p>