How to change accordionitem's header without animation?

17 Replies
2 Participants
Marked answer

Created by
BI bingxueyinlian

Platform
Vue

Platform
Vue

Control
Accordion

Created On
Mar 21, 2022 07:46 AM UTC

Last Activity On
Apr 8, 2022 07:53 AM UTC

Want to subscribe?
SIGN IN

<ejs-accordion
      ref="acrdnInstance"
      expandMode='Multiple'
    >
      <e-accordionitems>
        <e-accordionitem
          header='ASP.NET'
          :expanded='true'
          :content='content0'
        ></e-accordionitem>
        <e-accordionitem
          header='ASP.NET MVC'
          :expanded='true'
          :content='content1'
        ></e-accordionitem>
        <e-accordionitem
          header='JavaScript'
          :expanded='true'
          :content='content2'
        ></e-accordionitem>
      </e-accordionitems>
    </ejs-accordion>

 changeTitle() {
      this.$refs.acrdnInstance.ej2Instances.items[0].header = '123';
    },

I just want to change the header, but now there is an extra expand animation that I don't need

17 Replies 1 reply marked as answer

SK Satheesh Kumar Balasubramanian Syncfusion Team March 21, 2022 12:12 PM UTC

Hi Bingxueyinlian,

You can use expand animation effect as None to change the header without animation.

https://www.syncfusion.com/downloads/support/forum/173788/ze/Accordion1532649531

https://ej2.syncfusion.com/vue/documentation/api/accordion/accordionActionSettingsModel/#effect

App.vue:

changeTitle: function () {

this.$refs.acrdnInstance.ej2Instances.animation.expand.effect = 'None';

this.$refs.acrdnInstance.ej2Instances.items[0].header = '123';

Could you please check the above sample and confirm whether the above solution resolves the problem at your end?

Regards,

Satheesh Kumar B

BI bingxueyinlian March 22, 2022 04:17 AM UTC

If the 'effect' is changed to 'None', then when the header is clicked to expand the content, there is no expansion animation.

I tried restoring animation after changing the header, but it doesn't work.

      var oldEffect =
        this.$refs.acrdnInstance.ej2Instances.animation.expand.effect;
      this.$refs.acrdnInstance.ej2Instances.animation.expand.effect = 'None';
      this.$refs.acrdnInstance.ej2Instances.items[1].header = '123';
      this.$refs.acrdnInstance.ej2Instances.animation.expand.effect = oldEffect;

SK Satheesh Kumar Balasubramanian Syncfusion Team March 24, 2022 12:59 PM UTC

Hi Bingxueyinlian,

You can use accordion expanding event to restore the previous expand animation effect.

https://www.syncfusion.com/downloads/support/forum/173788/ze/Accordion2131737244

App.vue:

changeTitle: function () {

this.oldEffect = this.$refs.acrdnInstance.ej2Instances.animation.expand.effect;

this.$refs.acrdnInstance.ej2Instances.animation.expand.effect = 'None';

this.$refs.acrdnInstance.ej2Instances.items[0].header = '123';

expanding: function () {

if (this.$refs.acrdnInstance.ej2Instances.animation.expand.effect === 'None') {

this.$refs.acrdnInstance.ej2Instances.animation.expand.effect = this.oldEffect;

}

Could you please check the above sample and confirm whether the above solution resolves the problem at your end?

Regards,

Satheesh Kumar B

BI bingxueyinlian replied to Satheesh Kumar Balasubramanian March 25, 2022 07:25 AM UTC

This will have another problem, when I collapse it first, and then change the title, it will be expanded at this time (It is not needed)

SK Satheesh Kumar Balasubramanian Syncfusion Team March 28, 2022 02:22 PM UTC

Hi Bingxueyinlian,

You can use accordion expanding event to prevent the accordion item expand.

https://www.syncfusion.com/downloads/support/forum/173788/ze/Accordion-1168458339

App.vue:

expanding: function (e) {

if (this.$refs.acrdnInstance.ej2Instances.animation.expand.effect === 'None') {

this.$refs.acrdnInstance.ej2Instances.animation.expand.effect = this.oldEffect;

e.cancel = true;

}

Could you please check the above sample and confirm whether the above solution resolves the problem at your end?

Regards,

Satheesh Kumar B

BI bingxueyinlian replied to Satheesh Kumar Balasubramanian March 28, 2022 11:35 PM UTC

It's in the expanded state, changing the header will cause it to collapse .

SK Satheesh Kumar Balasubramanian Syncfusion Team March 29, 2022 01:13 PM UTC

Hi Bingxueyinlian,

You can use below customization to prevent the accordion item collapse.

App.vue:

export default Vue.extend({

data: function () {

return {

oldEffect: '',

expandContent: false,

}

methods: {

changeTitle: function () {

this.oldEffect = this.$refs.acrdnInstance.ej2Instances.animation.expand.effect;

this.$refs.acrdnInstance.ej2Instances.animation.expand.effect = 'None';

this.$refs.acrdnInstance.ej2Instances.items[0].header = '123';

this.expandContent = this.$refs.acrdnInstance.ej2Instances.element.querySelector(".e-acrdn-panel").classList.contains("e-content-hide");

expanding: function (e) {

if (this.expandContent && this.$refs.acrdnInstance.ej2Instances.animation.expand.effect === 'None') {

this.$refs.acrdnInstance.ej2Instances.animation.expand.effect = this.oldEffect;

e.cancel = true;

this.expandContent = false;

}

});

Could you please check the attached sample and confirm whether the above solution resolves the problem at your end?

Regards,

Satheesh Kumar B

Attachment: Accordion_6ae4852e.zip

BI bingxueyinlian replied to Satheesh Kumar Balasubramanian March 29, 2022 11:36 PM UTC

This is only worked for the first item，if I change the header of the second item，It doesn't work.

this.$refs.acrdnInstance.ej2Instances.items[1].header = '123';

Sometimes I need to modify multiple headers at the same time , So, I want a general solution

      this.$refs.acrdnInstance.ej2Instances.items[1].header = '123';
      this.$refs.acrdnInstance.ej2Instances.items[2].header = '456';

SK Satheesh Kumar Balasubramanian Syncfusion Team March 31, 2022 03:41 AM UTC

Hi Bingxueyinlian,

You can use the below customization in changeTitle method to resolve the reported issue.

App.vue:

methods: {

changeTitle: function () {

this.oldEffect = this.$refs.acrdnInstance.ej2Instances.animation.expand.effect;

this.$refs.acrdnInstance.ej2Instances.animation.expand.effect = 'None';

this.$refs.acrdnInstance.ej2Instances.items[0].header = '123';

this.$refs.acrdnInstance.ej2Instances.items[1].header = '456';

this.content = this.$refs.acrdnInstance.ej2Instances.element.querySelectorAll(".e-acrdn-panel");

for (var i = 0; i < this.content.length; i++) {

this.expandContent = this.$refs.acrdnInstance.ej2Instances.element.querySelectorAll(".e-acrdn-panel")[i].classList.contains("e-content-hide");

this.$refs.acrdnInstance.ej2Instances.items[i].expanded = !(this.expandContent);

}

expanding: function () {

}

Could you please check the attached sample and confirm whether the above solution resolves the problem at your end?

Regards,

Satheesh Kumar B

Attachment: Accordion_d38114d4.zip

BI bingxueyinlian replied to Satheesh Kumar Balasubramanian March 31, 2022 04:07 AM UTC

This is back to "no expansion animation"

SK Satheesh Kumar Balasubramanian Syncfusion Team April 1, 2022 12:05 PM UTC

Hi Bingxueyinlian,

Sorry for the inconvenience.

You can use the below customization in expanding event to restore the previous expand animation effect.

App.vue:

expanding: function (args) {

if (!args.isExpanded && this.$refs.acrdnInstance.ej2Instances.animation.expand.effect === 'None') {

this.$refs.acrdnInstance.ej2Instances.animation.expand.effect = this.oldEffect;

}

Could you please check the attached sample and confirm whether the above solution resolves the problem at your end?

Regards,

Satheesh Kumar B

Attachment: Accordion_6b4176af.zip

BI bingxueyinlian April 2, 2022 09:51 AM UTC

There is also a little problem, change the title when collapse, and there is no animation for the first expansion

SK Satheesh Kumar Balasubramanian Syncfusion Team April 4, 2022 03:39 PM UTC

Hi Bingxueyinlian,

You can use the below customization in clicked event to restore the previous expand animation effect.

App.vue:

methods: {

changeTitle: function () {

this.oldEffect = this.$refs.acrdnInstance.ej2Instances.animation.expand.effect;

this.$refs.acrdnInstance.ej2Instances.animation.expand.effect = 'None';

this.$refs.acrdnInstance.ej2Instances.items[0].header = '123';

this.$refs.acrdnInstance.ej2Instances.items[1].header = '456';

this.content = this.$refs.acrdnInstance.ej2Instances.element.querySelectorAll(".e-acrdn-panel");

for (var i = 0; i < this.content.length; i++) {

this.expandContent = this.$refs.acrdnInstance.ej2Instances.element.querySelectorAll(".e-acrdn-panel")[i].classList.contains("e-content-hide");

this.$refs.acrdnInstance.ej2Instances.items[i].expanded = !(this.expandContent);

}

clicked: function (args) {

if (!(args.item.expanded) && this.$refs.acrdnInstance.ej2Instances.animation.expand.effect === 'None') {

this.$refs.acrdnInstance.ej2Instances.animation.expand.effect = this.oldEffect;

}

Could you please check the attached sample and confirm whether the above solution resolves the problem at your end?

Regards,

Satheesh Kumar B

Attachment: Accordion_ba8bcf3f.zip

BI bingxueyinlian April 6, 2022 03:28 AM UTC

In this version, after changing the title, there is no animation always when you click to expand.

SK Satheesh Kumar Balasubramanian Syncfusion Team April 7, 2022 03:44 PM UTC

Hi Bingxueyinlian,

You can use the below customization in clicked and expanding event to restore the previous expand animation effect.

App.vue:

methods: {

expanding: function (args) {

if (!(args.item.expanded) && this.$refs.acrdnInstance.ej2Instances.animation.expand.effect === 'None') {

this.$refs.acrdnInstance.ej2Instances.animation.expand.effect = this.oldEffect;

}

clicked: function (args) {

this.expandContent = args.originalEvent.target.parentElement.classList.contains("e-content-hide");

if (!(this.expandContent) && this.$refs.acrdnInstance.ej2Instances.animation.expand.effect === 'None') {

this.$refs.acrdnInstance.ej2Instances.animation.expand.effect = this.oldEffect;

}

Could you please check the attached sample and confirm whether the above solution resolves the problem at your end?

Regards,

Satheesh Kumar B

Attachment: Accordion_ed684aaf.zip

Marked as answer

BI bingxueyinlian April 8, 2022 03:47 AM UTC

ok，it works.

thanks very much!

SK Satheesh Kumar Balasubramanian Syncfusion Team April 8, 2022 07:53 AM UTC

You are most welcome!!!

Need More Help?

Get personalized assistance from our support team.

Contact Support

17 Replies
2 Participants
Marked answer
Want to subscribe?
SIGN IN
Created by
BI bingxueyinlian
Platform
Vue
Control
Accordion
Created On
Mar 21, 2022 07:46 AM UTC
Last Activity On
Apr 8, 2022 07:53 AM UTC

Need More Help?

Get personalized assistance from our support team.

Contact Support