1. Home
  2. Forum
  3. Vue
  4. How to change accordionitem's header without animation?

How to change accordionitem's header without animation?


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


Loader.
Up arrow icon