Is posible to expand an ion-accordion when hovering?

Ionic Framework Ionic Vue
1

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-label>Agent</ion-label>
            </ion-item>

            <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>

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

          </ion-accordion>
</ion-accordion-group>
2

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

Here is a StackBlitz and the code below.

<template>
  <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>
      </ion-item>
      <div class="ion-padding" slot="content">First Content</div>
    </ion-accordion>
    <ion-accordion value="second">
      <ion-item v-on:mouseenter="expand('second')" slot="header" color="light">
        <ion-label>Second Accordion</ion-label>
      </ion-item>
      <div class="ion-padding" slot="content">Second Content</div>
    </ion-accordion>
    <ion-accordion value="third">
      <ion-item v-on:mouseenter="expand('third')" slot="header" color="light">
        <ion-label>Third Accordion</ion-label>
      </ion-item>
      <div class="ion-padding" slot="content">Third Content</div>
    </ion-accordion>
  </ion-accordion-group>
</template>

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

export default defineComponent({
  components: {
    IonAccordion,
    IonAccordionGroup,
    IonItem,
    IonLabel,
  },
  setup() {
    const accordionGroup = ref(null);
    const expand = (name) => {
      if (!accordionGroup.value) {
        return;
      }

      accordionGroup.value.$el.value = name;
    };

    return { accordionGroup, expand };
  },
});
</script>
1 Like
3

It worked like a charm, thx a lot!

1 Like