Is posible to expand an ion-accordion when hovering?

Hi there, I’m working in a project with ionic and vue and I’m wondering if is posible to expand an ion-accordion when mouse hovering the item header, since I have no idea how to do it
thanks a lot!

Some of my code:

<ion-accordion-group v-if="user" :multiple="true" expand="inset">
          <ion-accordion value="first">

            <ion-item lines="none" slot="header">

            <ion-item router-link="/invitation" color="light" lines="none" slot="content" @click="closeMenu">
              <ion-icon slot="start" :icon="peopleOutline" />
              <ion-badge slot="end">2</ion-badge>
              <ion-label>My Invitations</ion-label>

            <ion-item router-link="/campaign" color="light" lines="none" slot="content" @click="closeMenu">
              <ion-icon slot="start" :icon="newspaperOutline" />


You can use v-on:mouseenter on your ion-item headers.

Here is a StackBlitz and the code below.

  <ion-accordion-group ref="accordionGroup">
    <ion-accordion value="first">
      <ion-item v-on:mouseenter="expand('first')" slot="header" color="light">
        <ion-label>First Accordion</ion-label>
      <div class="ion-padding" slot="content">First Content</div>
    <ion-accordion value="second">
      <ion-item v-on:mouseenter="expand('second')" slot="header" color="light">
        <ion-label>Second Accordion</ion-label>
      <div class="ion-padding" slot="content">Second Content</div>
    <ion-accordion value="third">
      <ion-item v-on:mouseenter="expand('third')" slot="header" color="light">
        <ion-label>Third Accordion</ion-label>
      <div class="ion-padding" slot="content">Third Content</div>

<script lang="ts">
import { IonAccordion, IonAccordionGroup, IonItem, IonLabel } from '@ionic/vue';
import { defineComponent, ref } from 'vue';

export default defineComponent({
  components: {
  setup() {
    const accordionGroup = ref(null);
    const expand = (name) => {
      if (!accordionGroup.value) {

      accordionGroup.value.$el.value = name;

    return { accordionGroup, expand };
1 Like

It worked like a charm, thx a lot!

1 Like