Use VueJS v-on:click and Vanilla JS to collapse various divs when clicked

Question

Use VueJS v-on:click and Vanilla JS to collapse various divs when clicked

Can VueJS and vanilla JS be used to collapse specific divs among many?

I have information contained in separate card elements that include a title and a body. My goal is to make the body of each card expand or collapse when the respective title is clicked.

I am currently utilizing VueJS and prefer to avoid incorporating JQuery for now, focusing on pure JavaScript instead.

You can view an example of what I mean by checking out this example. Please note that I acknowledge the issue with using the same ID for multiple elements - it was simply done quickly for demonstration purposes.

<div class="section">
    <div class="title" @click="toggle"><span class="toggleIcon" id="toggleIcon">{{toggleIcon}}</span>Toggle This Section</div>
    <hr/>
    <div class="body" id="toggle">
        <img style="height:100px" src="https://cdn.vox-cdn.com/thumbor/Pkmq1nm3skO0-j693JTMd7RL0Zk=/0x0:2012x1341/1200x800/filters:focal(0x0:2012x1341)/cdn.vox-cdn.com/uploads/chorus_image/image/47070706/google2.0.0.jpg">
     </div>
</div>

The challenge I am facing right now is being able to collapse individual divs instead of all at once.

javascript html css vue.js

Answer 1

Answer №1

Vue.js operates on data, so any changes in the DOM should mirror changes in the underlying data. To achieve this, it's recommended to encapsulate the cards in a component. This way, each card can keep track of its individual state using a flag like v-show to toggle visibility:

Vue Instance

Vue.component('card', {
  template: '#card',
  methods: {
    toggle() {
     this.showSection = !this.showSection
    }
  },
  data() {
    return {
      showSection: true, // Flag to show section
      imageUrl: 'https://cdn.vox-cdn.com/thumbor/Pkmq1nm3skO0-j693JTMd7RL0Zk=/0x0:2012x1341/1200x800/filters:focal(0x0:2012x1341)/cdn.vox-cdn.com/uploads/chorus_image/image/47070706/google2.0.0.jpg',
      toggleIcon: '+'
    }
  }
})

Markup

  <div class="section">
    <div class="title" v-on:click="toggle">
      <span class="toggleIcon" id="toggleIcon">{{toggleIcon}}</span> Toggle This Section
    </div>
    <hr/>
    <!-- BIND v-show to the showSection data property to reflect changes -->
    <div class="body" v-show="showSection">
      <img v-bind:src="imageUrl">
    </div>
  </div>

By toggling the showSection flag without directly manipulating the DOM, Vue will automatically update the view accordingly.

See the live demo on JSFiddle here: https://jsfiddle.net/craig_h_411/j1wh75v9/1/

Dynamically Passing Content to Cards

To inject different content into each card, you can utilize Vue slots:

<template id="card">
  <div class="section">
    <div class="title" v-on:click="toggle">
      <span class="toggleIcon" id="toggleIcon">{{toggleIcon}}</span> Toggle This Section
    </div>
    <hr/>
    <div class="body" v-show="showSection">
      <!-- Add slot details here -->
      <slot></slot>
    </div>
  </div>
</template>

With slots, content between the component tags gets inserted where the slot tags are defined in the component. For example:

<card>I'm a card</card>
<card> I'm another card</card>

The text provided between the card tags will be placed within the designated slot. Keep in mind that data properties accessed within slots must be available in the parent scope, not the component's scope.

Check out the interactive example on JSFiddle: https://jsfiddle.net/craig_h_411/ew1epg61/

Answer 2

Vue.js operates on data, so any changes in the DOM should mirror changes in the underlying data. To achieve this, it's recommended to encapsulate the cards in a component. This way, each card can keep track of its individual state using a flag like v-show to toggle visibility:

Vue Instance

Vue.component('card', {
  template: '#card',
  methods: {
    toggle() {
     this.showSection = !this.showSection
    }
  },
  data() {
    return {
      showSection: true, // Flag to show section
      imageUrl: 'https://cdn.vox-cdn.com/thumbor/Pkmq1nm3skO0-j693JTMd7RL0Zk=/0x0:2012x1341/1200x800/filters:focal(0x0:2012x1341)/cdn.vox-cdn.com/uploads/chorus_image/image/47070706/google2.0.0.jpg',
      toggleIcon: '+'
    }
  }
})

Markup

  <div class="section">
    <div class="title" v-on:click="toggle">
      <span class="toggleIcon" id="toggleIcon">{{toggleIcon}}</span> Toggle This Section
    </div>
    <hr/>
    <!-- BIND v-show to the showSection data property to reflect changes -->
    <div class="body" v-show="showSection">
      <img v-bind:src="imageUrl">
    </div>
  </div>

By toggling the showSection flag without directly manipulating the DOM, Vue will automatically update the view accordingly.

See the live demo on JSFiddle here: https://jsfiddle.net/craig_h_411/j1wh75v9/1/

Dynamically Passing Content to Cards

To inject different content into each card, you can utilize Vue slots:

<template id="card">
  <div class="section">
    <div class="title" v-on:click="toggle">
      <span class="toggleIcon" id="toggleIcon">{{toggleIcon}}</span> Toggle This Section
    </div>
    <hr/>
    <div class="body" v-show="showSection">
      <!-- Add slot details here -->
      <slot></slot>
    </div>
  </div>
</template>

With slots, content between the component tags gets inserted where the slot tags are defined in the component. For example:

<card>I'm a card</card>
<card> I'm another card</card>

The text provided between the card tags will be placed within the designated slot. Keep in mind that data properties accessed within slots must be available in the parent scope, not the component's scope.

Check out the interactive example on JSFiddle: https://jsfiddle.net/craig_h_411/ew1epg61/

Answer 3

Answer №2

Here is a different approach to the collapsible card design, featuring slots and inspired by @craig_h:

<template>
  <div class="section">
    <div :class="[isActive ? 'active' : '', 'collapsible']" v-on:click="toggle">
      Click Here to Toggle This Section <span class="toggleIcon" id="toggleIcon">{{ toggleIcon }}</span>
    </div>
    <div :class="[isActive ? 'block' : 'none', 'content']" v-show="isActive">
      <slot></slot>
    </div>
  </div>
</template>

<script>
export default {
  name: 'CollapsableCard',
  components: {},
  data() {
    return {
      isActive: false,
      toggleIcon: '+',
    }
  },
  methods: {
    toggle() {
      this.isActive = !this.isActive
    },
  },
}
</script>

<style scoped>
.collapsible {
  background-color: #d8f8ea;
  color: black;
  cursor: pointer;
  padding: 18px;
  width: 100%;
  border: none;
  text-align: left;
  outline: none;
}

.content {
  padding: 0 18px;
  overflow: hidden;
  background-color: #eefcf6;
}
</style>

Answer 4

Here is a different approach to the collapsible card design, featuring slots and inspired by @craig_h:

<template>
  <div class="section">
    <div :class="[isActive ? 'active' : '', 'collapsible']" v-on:click="toggle">
      Click Here to Toggle This Section <span class="toggleIcon" id="toggleIcon">{{ toggleIcon }}</span>
    </div>
    <div :class="[isActive ? 'block' : 'none', 'content']" v-show="isActive">
      <slot></slot>
    </div>
  </div>
</template>

<script>
export default {
  name: 'CollapsableCard',
  components: {},
  data() {
    return {
      isActive: false,
      toggleIcon: '+',
    }
  },
  methods: {
    toggle() {
      this.isActive = !this.isActive
    },
  },
}
</script>

<style scoped>
.collapsible {
  background-color: #d8f8ea;
  color: black;
  cursor: pointer;
  padding: 18px;
  width: 100%;
  border: none;
  text-align: left;
  outline: none;
}

.content {
  padding: 0 18px;
  overflow: hidden;
  background-color: #eefcf6;
}
</style>

Use VueJS v-on:click and Vanilla JS to collapse various divs when clicked

Answer №1

Dynamically Passing Content to Cards

Answer №2

Similar questions

Dynamic Code for Removing List Items Based on Date

What is the best way to ensure the initial item in an accordion group remains open by default when using NextJS?

Adding a class to the body for a specific route in web development

What sets apart .ejs from .html files?

I am currently working on an Electron Project and am interested in incorporating vueJS into it

Obtain the current date using Moment JS in JavaScript

Sending an image dynamically as a prop to a child component

Applying a variety of elements to a single function

Await the reply from Angular while using Selenium WebDriver

Modifying webpack settings for a create-react-app based project: A step-by-step guide

How come React-Native isn't displaying successfully retrieved data using Axios?

Can a simultaneous read/write conflict occur in JavaScript while browsing?

What is the method for retrieving the name of an object's property within an Angular template

Switch between clicking and hiding

Insert information into a dialog box in Vuetify

Add a script tag to every image in my HTML at once using C#

The functionality of resizing a layout in Html5/CSS3 is not functioning correctly

How can I ensure a DIV is shown on every sub-page?

Adjust the size of the font based on the screen resolution

Connect a responsive div to a main div