I need to open up a DIV like an accordion using JQuery and Vue.js

Question

I need help getting the below to open like an accordion. My style is not working.

<main>
  <h1>Frequently Asked Questions</h1>
  <div class="topic">
    <div class="open">
      <h2 class="question">1. How can i delete my complaint/comment?</h2>
      <span class="faq-t"></span>
    </div>
    <p class="answer">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure
      dolor n reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
  </div>

This is what I am using to open the code above.

$(".open").click(function() {
  var container = $(this).parents(".topic");
  var answer = container.find(".answer");
  var trigger = container.find(".faq-t");

  answer.slideToggle(200);

  if (trigger.hasClass("faq-o")) {
    trigger.removeClass("faq-o");
  } else {
    trigger.addClass("faq-o");
  }

  if (container.hasClass("expanded")) {
    container.removeClass("expanded");
  } else {
    container.addClass("expanded");
  }
});

What specifically seems to go wrong? You might find this informative: [How To (Safely) Use A jQuery Plugin With Vue.js](https://vuejsdevelopers.com/2017/05/20/vue-js-safely-jquery-plugin/) — showdev, Oct 12 '18 at 23:53
Also see [Make VueJS and jQuery play nice](https://stackoverflow.com/questions/43240789/make-vuejs-and-jquery-play-nice) or [Vue.js and jQuery?](https://stackoverflow.com/questions/42728104/vue-js-and-jquery) — showdev, Oct 12 '18 at 23:58
It does not look like you're using Vue at all. In particular, you are using jQuery to handle the click event, and lots of DOM manipulation inside it. See some of the links in the other comments. — Roy J, Oct 13 '18 at 00:05
@RoyJ the code above works fine you could see my answer, i think he has problems somewhere else — Boussadjra Brahim, Oct 13 '18 at 00:28
@boussadjrabrahim Code that works under jQuery alone often does not work when Vue is brought into the picture. The question asks about using the two together. The code above does not use them both. Your example doesn't use Vue to control the DOM, either. — Roy J, Oct 13 '18 at 13:21
I mean your Vue+jQuery example doesn't use Vue to control the DOM. — Roy J, Oct 13 '18 at 14:19

score 0 · Answer 1 · edited Jul 16 '22 at 04:19

If you are going to use Vue, you should commit to using it for all DOM manipulation except what is custom-handled by things like slideToggle, and those custom behaviors need to be sequestered from the normal DOM updates that Vue will do.

Here is how your example might be done with Vue, using jQuery's slideUp and slideDown as appropriate to hide and show the answer. Most of the time, jQuery functions are best handled by using a wrapper component, but here, a custom directive was sufficient.

Vue.config.devtools = false;
Vue.config.productionTip = false;

new Vue({
  el: '#app',
  data: {
    expanded: false
  },
  methods: {
    toggle() {
      this.expanded = !this.expanded;
    }
  },
  computed: {
    containerClass() {
      return this.expanded ? 'expanded' : '';
    },
    triggerClass() {
      return this.expanded ? 'faq-o' : '';
    }
  },
  directives: {
    slideToggle(el, binding) {
      if (binding.oldValue !== binding.value) {
        const fn = binding.value ? 'slideDown' : 'slideUp';
        $(el)[fn](200);
      }
    }
  }
});

.answer {
  display: none;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.16/vue.js"></script>
<script src="https://code.jquery.com/jquery-2.2.4.min.js" integrity="sha256-BbhdlvQf/xTY9gja0Dq3HiwQF8LaCRTXxZKRutelT44=" crossorigin="anonymous"></script>


<div id="app" class="container">

  <h1>Frequently Asked Questions</h1>
  <div class="topic" :class="containerClass">
    <div @click="toggle">
      <h2 class="question">1. How can i delete my complaint/comment?</h2>
      <span class="faq-t" :class="triggerClass"></span>
    </div>
    <p class="answer" v-slide-toggle="expanded">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure
      dolor n reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
  </div>
</div>

I need to open up a DIV like an accordion using JQuery and Vue.js

1 Answers1