title: Vue js bootstrap add animation while collapse
body: <p>I am making a side bar menu with collapse show/hide. With my current css the collapse is not smooth and it seems force full or looks some weird. </p>
  
  <p>I wanted a slide with smooth transition when the item is being closed. But here in my case what's happening is when some item is already open and next item is clicked(for open). There it looks like toggle is being forcefully and it does not seems smooth collapsing of the list.</p>
  
  <p>What could be the better approach for this please suggest some better ways.</p>
  
  <p><a href="https://jsfiddle.net/g16xftq2/6/" rel="nofollow noreferrer">Fiddle Implementation.</a></p>
  
  <p>I don't know whether my approach is correct or I am missing something here?</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="false" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>new Vue({
    el: '#app',
    methods: {
      setActiveItemId(itemIndex) {
        if (itemIndex === this.activeItemId) {
          this.activeItemId = ''
          return
        }
        this.activeItemId = itemIndex
      }
    },
    data() {
      return {
        message: 'Hello Vue.js!',
        activeItemId: '',
        sideBar: [{
            name: "Dashboard",
            url: "/dashboard",
            icon: "ti-world",
            children: [{
                name: "Buttons",
                url: "/components/buttons",
                icon: "fa-book",
              },
              {
                name: "Social Buttons",
                url: "/components/social-buttons",
                icon: "icon-puzzle",
              }
            ]
          },
          {
            name: "Components",
            url: "/components",
            icon: "ti-pencil-alt",
            children: [{
                name: "Buttons",
                url: "/components/buttons",
                icon: "fa-book",
              },
              {
                name: "Social Buttons",
                url: "/components/social-buttons",
                icon: "icon-puzzle",
              }
            ]
          },
          {
            name: "Validation",
            url: "/components",
            icon: "ti-pencil-alt",
            children: [{
                name: "Buttons",
                url: "/components/buttons",
                icon: "fa-book",
              },
              {
                name: "Social Buttons",
                url: "/components/social-buttons",
                icon: "icon-puzzle",
              }
            ]
          }
        ]
      }
    },
    computed: {
      isActive() {
        return this.activeItemId !== ''
      }
    }
  })</code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code>.collapse.show {
    display: block;
  }
  
  .collapse {
    display: none;
  }
  
  .list-unstyled {
    padding-left: 0;
    list-style: none;
  }
  
  .collapse.list-unstyled {
    padding-left: 15px;
  }
  
  nav.side-navbar {
    background: #fff;
    min-width: 250px;
    max-width: 250px;
    color: #000;
    -webkit-box-shadow: 1px 1px 1px rgba(0, 0, 0, 0.1);
    box-shadow: 1px 1px 1px rgba(0, 0, 0, 0.1);
    z-index: 999;
  }
  
  nav.side-navbar ul a:hover {
    background: orange;
    color: #fff !important;
  }
  
  nav.side-navbar ul a {
    padding: 10px 15px;
    text-decoration: none;
    display: block;
    font-weight: 300;
    border-left: 4px solid transparent;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet"/&gt;
  
  &lt;script src="https://unpkg.com/vue"&gt;&lt;/script&gt;
  
  &lt;div id="app"&gt;
    &lt;nav class="side-navbar"&gt;
      &lt;ul class="list-unstyled"&gt;
        &lt;li&gt;
          &lt;a&gt;
            &lt;i class="ti-home"&gt;&lt;/i&gt;Home&lt;/a&gt;
        &lt;/li&gt;
        &lt;li v-for="(x, itemIndex) in sideBar" :key="itemIndex"&gt;
          &lt;a @click="setActiveItemId(itemIndex)"&gt;
            &lt;i class="fa" :class="x.icon"&gt;&lt;/i&gt;{{x.name}}
          &lt;/a&gt;
          &lt;ul :id="x.id" class="collapse list-unstyled" :class="{'show':activeItemId === itemIndex  &amp;&amp; isActive}"&gt;
            &lt;li v-for="y in x.children" :key="y.id"&gt;
              &lt;a&gt;{{y.name}}&lt;/a&gt;
            &lt;/li&gt;
          &lt;/ul&gt;
        &lt;/li&gt;
      &lt;/ul&gt;
    &lt;/nav&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>