title: One @click event with multiple toggles
body: <p>I have one  element. I would like to add 3 different toggles with one @click:</p>
  
  <ol>
  <li><p>toggle hidden nested <code>&lt;p&gt;</code></p></li>
  <li><p>toggle <code>&lt;i&gt;</code> element</p></li>
  <li><p>toggle background color of parent box <code>(.faq-box)</code></p></li>
  </ol>
  
  <p>What is the best way to do this in vue.js?</p>
  
  <p>I have deleted some data objects etc, just left behind what is applicable on the desired element. </p>
  
  <p>This is the HTML element: </p>
  
  <pre><code>&lt;div v-for="item in faqItems" v-bind:class="[isActive ? 'faq-box-white' : 'faq-box-warmgrey']" class="box faq-box is-shadowless has-py-3" @click="toggleFaq($event)"&gt;
          &lt;div class="columns is-mobile"&gt;
              &lt;div class="column"&gt;
                  &lt;li class=""&gt;
                   &lt;span class="is-size-7-mobile has-text-weight-semibold collapse"&gt;
                                              {{ item.question }}
                  &lt;/span&gt;
                  &lt;p class="is-size-7 has-text-weight-normal is-hidden has-pt-4" v-html="item.answer"&gt;
                  &lt;/p&gt;
                  &lt;/li&gt;
              &lt;/div&gt;
              &lt;div class="column is-1 has-p-1"&gt;
                  &lt;i class="fa fa-caret-down is-pulled-right has-pt-3"&gt;&lt;/i&gt;
              &lt;/div&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  
  new Vue({
      el: '#appName',
      data: {
          isActive: true,
          },
      methods: {
          toggleFaq: function(event) {
  
              let el = event.target.parentNode.children[1];
              console.log(el);
  
              // console.log(document.querySelector("i").classList);
              let el_icon = document.querySelector("i").classList;
              console.log(el_icon);
                  // el_icon.classList.toggle("fa-caret-up");
                  // el_icon.classList.toggle("fa-caret-down");
  
              if(el.classList.contains('is-hidden')){
                  el.classList.remove('is-hidden')
              } else {
                  el.classList.add('is-hidden')
              }
  
              el = event.target.parentNode.children[0];
              if(el.classList.contains('collapse')){
                  el.classList.remove('collapse')
              } else {
                  el.classList.add('collapse')
              }
  
              //toggle background color
              if(this.isActive){
                  this.isActive = false;
              }else{
                  this.isActive = true;
              }
  
          },
  </code></pre>