Vue UI Components Documentation

Sets or gets the animation type.

'slide'

'fade'

'none'

<template>
  <JqxExpander ref="myExpander"
    :width="350" :animationType="'fade'">
    <div>Early History of the Internet</div>
    <div> 
      <ul> 
        <li>1961 First packet-switching papers</li>
        <li>1966 Merit Network founded</li>
        <li>1966 ARPANET planning starts</li>
        <li>1969 ARPANET carries its first packets</li>
        <li>1970 Mark I network at NPL (UK)</li>
        <li>1971 Tymnet packet-switched network</li>
        <li>1973 CYCLADES network demonstrated</li>
        <li>1974 Telenet packet-switched network</li>
        <li>1980 Ethernet standard introduced</li>
      </ul>
    </div>
  </JqxExpander>
</template>
 
<script>
  import JqxExpander from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxexpander.vue';
 
  export default {
    components: {
      JqxExpander
    }
  }
</script>

Sets or gets header's arrow position.

'left'

'right'

<template>
  <JqxExpander ref="myExpander"
    :width="350" :arrowPosition="'left'">
    <div>Early History of the Internet</div>
    <div> 
      <ul> 
        <li>1961 First packet-switching papers</li>
        <li>1966 Merit Network founded</li>
        <li>1966 ARPANET planning starts</li>
        <li>1969 ARPANET carries its first packets</li>
        <li>1970 Mark I network at NPL (UK)</li>
        <li>1971 Tymnet packet-switched network</li>
        <li>1973 CYCLADES network demonstrated</li>
        <li>1974 Telenet packet-switched network</li>
        <li>1980 Ethernet standard introduced</li>
      </ul>
    </div>
  </JqxExpander>
</template>
 
<script>
  import JqxExpander from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxexpander.vue';
 
  export default {
    components: {
      JqxExpander
    }
  }
</script>

Sets or gets the collapsing animation duration.

<template>
  <JqxExpander ref="myExpander"
    :width="350" :collapseAnimationDuration="3000">
    <div>Early History of the Internet</div>
    <div> 
      <ul> 
        <li>1961 First packet-switching papers</li>
        <li>1966 Merit Network founded</li>
        <li>1966 ARPANET planning starts</li>
        <li>1969 ARPANET carries its first packets</li>
        <li>1970 Mark I network at NPL (UK)</li>
        <li>1971 Tymnet packet-switched network</li>
        <li>1973 CYCLADES network demonstrated</li>
        <li>1974 Telenet packet-switched network</li>
        <li>1980 Ethernet standard introduced</li>
      </ul>
    </div>
  </JqxExpander>
</template>
 
<script>
  import JqxExpander from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxexpander.vue';
 
  export default {
    components: {
      JqxExpander
    }
  }
</script>

Sets or gets whether the expander is disabled.

<template>
  <JqxExpander ref="myExpander"
    :width="350" :disabled="true">
    <div>Early History of the Internet</div>
    <div> 
      <ul> 
        <li>1961 First packet-switching papers</li>
        <li>1966 Merit Network founded</li>
        <li>1966 ARPANET planning starts</li>
        <li>1969 ARPANET carries its first packets</li>
        <li>1970 Mark I network at NPL (UK)</li>
        <li>1971 Tymnet packet-switched network</li>
        <li>1973 CYCLADES network demonstrated</li>
        <li>1974 Telenet packet-switched network</li>
        <li>1980 Ethernet standard introduced</li>
      </ul>
    </div>
  </JqxExpander>
</template>
 
<script>
  import JqxExpander from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxexpander.vue';
 
  export default {
    components: {
      JqxExpander
    }
  }
</script>

Sets or gets expander's state (collapsed or expanded).

<template>
  <JqxExpander ref="myExpander"
    :width="350" :expanded="false">
    <div>Early History of the Internet</div>
    <div> 
      <ul> 
        <li>1961 First packet-switching papers</li>
        <li>1966 Merit Network founded</li>
        <li>1966 ARPANET planning starts</li>
        <li>1969 ARPANET carries its first packets</li>
        <li>1970 Mark I network at NPL (UK)</li>
        <li>1971 Tymnet packet-switched network</li>
        <li>1973 CYCLADES network demonstrated</li>
        <li>1974 Telenet packet-switched network</li>
        <li>1980 Ethernet standard introduced</li>
      </ul>
    </div>
  </JqxExpander>
</template>
 
<script>
  import JqxExpander from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxexpander.vue';
 
  export default {
    components: {
      JqxExpander
    }
  }
</script>

Sets or gets the expanding animation duration.

<template>
  <JqxExpander ref="myExpander"
    :width="350" :expandAnimationDuration="3000">
    <div>Early History of the Internet</div>
    <div> 
      <ul> 
        <li>1961 First packet-switching papers</li>
        <li>1966 Merit Network founded</li>
        <li>1966 ARPANET planning starts</li>
        <li>1969 ARPANET carries its first packets</li>
        <li>1970 Mark I network at NPL (UK)</li>
        <li>1971 Tymnet packet-switched network</li>
        <li>1973 CYCLADES network demonstrated</li>
        <li>1974 Telenet packet-switched network</li>
        <li>1980 Ethernet standard introduced</li>
      </ul>
    </div>
  </JqxExpander>
</template>
 
<script>
  import JqxExpander from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxexpander.vue';
 
  export default {
    components: {
      JqxExpander
    }
  }
</script>

Sets or gets expander's height. Possible values - 'auto' or string like this 'Npx' where N is any number or a numeric value in pixels.

<template>
  <JqxExpander ref="myExpander"
    :width="350" :height="100">
    <div>Early History of the Internet</div>
    <div> 
      <ul> 
        <li>1961 First packet-switching papers</li>
        <li>1966 Merit Network founded</li>
        <li>1966 ARPANET planning starts</li>
        <li>1969 ARPANET carries its first packets</li>
        <li>1970 Mark I network at NPL (UK)</li>
        <li>1971 Tymnet packet-switched network</li>
        <li>1973 CYCLADES network demonstrated</li>
        <li>1974 Telenet packet-switched network</li>
        <li>1980 Ethernet standard introduced</li>
      </ul>
    </div>
  </JqxExpander>
</template>
 
<script>
  import JqxExpander from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxexpander.vue';
 
  export default {
    components: {
      JqxExpander
    }
  }
</script>

Sets or gets header's position.

'top'

'bottom'

<template>
  <JqxExpander ref="myExpander"
    :width="350" :headerPosition="'bottom'">
    <div>Early History of the Internet</div>
    <div> 
      <ul> 
        <li>1961 First packet-switching papers</li>
        <li>1966 Merit Network founded</li>
        <li>1966 ARPANET planning starts</li>
        <li>1969 ARPANET carries its first packets</li>
        <li>1970 Mark I network at NPL (UK)</li>
        <li>1971 Tymnet packet-switched network</li>
        <li>1973 CYCLADES network demonstrated</li>
        <li>1974 Telenet packet-switched network</li>
        <li>1980 Ethernet standard introduced</li>
      </ul>
    </div>
  </JqxExpander>
</template>
 
<script>
  import JqxExpander from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxexpander.vue';
 
  export default {
    components: {
      JqxExpander
    }
  }
</script>

Callback function called when the item's content needs to be initialized. Useful for initializing other widgets within the content of jqxExpander.

<template>
  <JqxExpander ref="myExpander"
         :width="350" :initContent="initContent">
    <div>Early History of the Internet</div>
    <div>
      <ul>
        <li>1961 First packet-switching papers</li>
        <li>1966 Merit Network founded</li>
        <li>1966 ARPANET planning starts</li>
        <li>1969 ARPANET carries its first packets</li>
        <li>1970 Mark I network at NPL (UK)</li>
        <li>1971 Tymnet packet-switched network</li>
        <li>1973 CYCLADES network demonstrated</li>
        <li>1974 Telenet packet-switched network</li>
        <li>1980 Ethernet standard introduced</li>
      </ul>
      <div class='initContent'></div>
    </div>
  </JqxExpander>
</template>
<script>
  import JqxExpander from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxexpander.vue';
  import JqxButton from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxbuttons.vue';
  export default {
    components: {
      JqxExpander,
      JqxButton
    },
    methods: {
      initContent: function () {
        // Useful for Initializing Other Widgets Within the Content of jqxExpander
        jqwidgets.createInstance('.initContent', 'jqxButton', { value: 'Button'});
      }
    }
  }
</script>

Determines whether the right-to-left support is enabled.

<template>
  <JqxExpander ref="myExpander"
    :width="350" :rtl="true">
    <div>Early History of the Internet</div>
    <div> 
      <ul> 
        <li>1961 First packet-switching papers</li>
        <li>1966 Merit Network founded</li>
        <li>1966 ARPANET planning starts</li>
        <li>1969 ARPANET carries its first packets</li>
        <li>1970 Mark I network at NPL (UK)</li>
        <li>1971 Tymnet packet-switched network</li>
        <li>1973 CYCLADES network demonstrated</li>
        <li>1974 Telenet packet-switched network</li>
        <li>1980 Ethernet standard introduced</li>
      </ul>
    </div>
  </JqxExpander>
</template>
 
<script>
  import JqxExpander from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxexpander.vue';
 
  export default {
    components: {
      JqxExpander
    }
  }
</script>

Sets or gets whether header's arrow is going to be shown.

<template>
  <JqxExpander ref="myExpander"
    :width="350" :showArrow="false">
    <div>Early History of the Internet</div>
    <div> 
      <ul> 
        <li>1961 First packet-switching papers</li>
        <li>1966 Merit Network founded</li>
        <li>1966 ARPANET planning starts</li>
        <li>1969 ARPANET carries its first packets</li>
        <li>1970 Mark I network at NPL (UK)</li>
        <li>1971 Tymnet packet-switched network</li>
        <li>1973 CYCLADES network demonstrated</li>
        <li>1974 Telenet packet-switched network</li>
        <li>1980 Ethernet standard introduced</li>
      </ul>
    </div>
  </JqxExpander>
</template>
 
<script>
  import JqxExpander from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxexpander.vue';
 
  export default {
    components: {
      JqxExpander
    }
  }
</script>

Sets the widget's theme.

• Include the theme's CSS file after jqx.base.css.
  The following code example adds the 'material' theme.

  
  <link rel="stylesheet" href="../../jqwidgets/styles/jqx.base.css" type="text/css" />
  <link rel="stylesheet" href="../../jqwidgets/styles/jqx.material.css" type="text/css" /> 
                                  

• Set the widget's theme property to 'material' when you initialize it.

<template>
  <JqxExpander ref="myExpander"
    :width="350" :theme="'material'">
    <div>Early History of the Internet</div>
    <div> 
      <ul> 
        <li>1961 First packet-switching papers</li>
        <li>1966 Merit Network founded</li>
        <li>1966 ARPANET planning starts</li>
        <li>1969 ARPANET carries its first packets</li>
        <li>1970 Mark I network at NPL (UK)</li>
        <li>1971 Tymnet packet-switched network</li>
        <li>1973 CYCLADES network demonstrated</li>
        <li>1974 Telenet packet-switched network</li>
        <li>1980 Ethernet standard introduced</li>
      </ul>
    </div>
  </JqxExpander>
</template>
 
<script>
  import JqxExpander from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxexpander.vue';
 
  export default {
    components: {
      JqxExpander
    }
  }
</script>

Sets or gets user interaction used for expanding or collapsing the content.

'click'

'dblclick'

'none'

<template>
  <JqxExpander ref="myExpander"
    :width="350" :toggleMode="'dblclick'">
    <div>Early History of the Internet</div>
    <div> 
      <ul> 
        <li>1961 First packet-switching papers</li>
        <li>1966 Merit Network founded</li>
        <li>1966 ARPANET planning starts</li>
        <li>1969 ARPANET carries its first packets</li>
        <li>1970 Mark I network at NPL (UK)</li>
        <li>1971 Tymnet packet-switched network</li>
        <li>1973 CYCLADES network demonstrated</li>
        <li>1974 Telenet packet-switched network</li>
        <li>1980 Ethernet standard introduced</li>
      </ul>
    </div>
  </JqxExpander>
</template>
 
<script>
  import JqxExpander from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxexpander.vue';
 
  export default {
    components: {
      JqxExpander
    }
  }
</script>

Sets or gets expander's width.Possible values - 'auto' or string like this 'Npx' where N is any number or a numeric value in pixels.

<template>
  <JqxExpander ref="myExpander"
    :width="300">
    <div>Early History of the Internet</div>
    <div> 
      <ul> 
        <li>1961 First packet-switching papers</li>
        <li>1966 Merit Network founded</li>
        <li>1966 ARPANET planning starts</li>
        <li>1969 ARPANET carries its first packets</li>
        <li>1970 Mark I network at NPL (UK)</li>
        <li>1971 Tymnet packet-switched network</li>
        <li>1973 CYCLADES network demonstrated</li>
        <li>1974 Telenet packet-switched network</li>
        <li>1980 Ethernet standard introduced</li>
      </ul>
    </div>
  </JqxExpander>
</template>
 
<script>
  import JqxExpander from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxexpander.vue';
 
  export default {
    components: {
      JqxExpander
    }
  }
</script>

This event is triggered when the jqxExpander is going to be collapsed.

Code examples

Bind to the collapsing event of jqxExpander.

<template>
  <JqxExpander ref="myExpander" @collapsing="onCollapsing($event)"
    :width="350">
    <div>Early History of the Internet</div>
    <div> 
      <ul> 
        <li>1961 First packet-switching papers</li>
        <li>1966 Merit Network founded</li>
        <li>1966 ARPANET planning starts</li>
        <li>1969 ARPANET carries its first packets</li>
        <li>1970 Mark I network at NPL (UK)</li>
        <li>1971 Tymnet packet-switched network</li>
        <li>1973 CYCLADES network demonstrated</li>
        <li>1974 Telenet packet-switched network</li>
        <li>1980 Ethernet standard introduced</li>
      </ul>
    </div>
  </JqxExpander>
</template>
 
<script>
  import JqxExpander from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxexpander.vue';
 
  export default {
    components: {
      JqxExpander
    },
    methods: {
      onCollapsing: function (event) {
        alert('do something...');
      }
    }
  }
</script>

This event is triggered when the jqxExpander is collapsed.

Code examples

Bind to the collapsed event of jqxExpander.

<template>
  <JqxExpander ref="myExpander" @collapsed="onCollapsed($event)"
    :width="350">
    <div>Early History of the Internet</div>
    <div> 
      <ul> 
        <li>1961 First packet-switching papers</li>
        <li>1966 Merit Network founded</li>
        <li>1966 ARPANET planning starts</li>
        <li>1969 ARPANET carries its first packets</li>
        <li>1970 Mark I network at NPL (UK)</li>
        <li>1971 Tymnet packet-switched network</li>
        <li>1973 CYCLADES network demonstrated</li>
        <li>1974 Telenet packet-switched network</li>
        <li>1980 Ethernet standard introduced</li>
      </ul>
    </div>
  </JqxExpander>
</template>
 
<script>
  import JqxExpander from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxexpander.vue';
 
  export default {
    components: {
      JqxExpander
    },
    methods: {
      onCollapsed: function (event) {
        alert('do something...');
      }
    }
  }
</script>

This event is triggered when the jqxExpander is going to be expanded.

Code examples

Bind to the expanding event of jqxExpander.

<template>
  <JqxExpander ref="myExpander" @expanding="onExpanding($event)"
    :width="350">
    <div>Early History of the Internet</div>
    <div> 
      <ul> 
        <li>1961 First packet-switching papers</li>
        <li>1966 Merit Network founded</li>
        <li>1966 ARPANET planning starts</li>
        <li>1969 ARPANET carries its first packets</li>
        <li>1970 Mark I network at NPL (UK)</li>
        <li>1971 Tymnet packet-switched network</li>
        <li>1973 CYCLADES network demonstrated</li>
        <li>1974 Telenet packet-switched network</li>
        <li>1980 Ethernet standard introduced</li>
      </ul>
    </div>
  </JqxExpander>
</template>
 
<script>
  import JqxExpander from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxexpander.vue';
 
  export default {
    components: {
      JqxExpander
    },
    methods: {
      onExpanding: function (event) {
        alert('do something...');
      }
    }
  }
</script>

This event is triggered when the jqxExpander is expanded.

Code examples

Bind to the expanded event of jqxExpander.

<template>
  <JqxExpander ref="myExpander" @expanded="onExpanded($event)"
    :width="350">
    <div>Early History of the Internet</div>
    <div> 
      <ul> 
        <li>1961 First packet-switching papers</li>
        <li>1966 Merit Network founded</li>
        <li>1966 ARPANET planning starts</li>
        <li>1969 ARPANET carries its first packets</li>
        <li>1970 Mark I network at NPL (UK)</li>
        <li>1971 Tymnet packet-switched network</li>
        <li>1973 CYCLADES network demonstrated</li>
        <li>1974 Telenet packet-switched network</li>
        <li>1980 Ethernet standard introduced</li>
      </ul>
    </div>
  </JqxExpander>
</template>
 
<script>
  import JqxExpander from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxexpander.vue';
 
  export default {
    components: {
      JqxExpander
    },
    methods: {
      onExpanded: function (event) {
        alert('do something...');
      }
    }
  }
</script>

Method which is collapsing the expander.

<template>
  <JqxExpander ref="myExpander"
    :width="350">
    <div>Early History of the Internet</div>
    <div> 
      <ul> 
        <li>1961 First packet-switching papers</li>
        <li>1966 Merit Network founded</li>
        <li>1966 ARPANET planning starts</li>
        <li>1969 ARPANET carries its first packets</li>
        <li>1970 Mark I network at NPL (UK)</li>
        <li>1971 Tymnet packet-switched network</li>
        <li>1973 CYCLADES network demonstrated</li>
        <li>1974 Telenet packet-switched network</li>
        <li>1980 Ethernet standard introduced</li>
      </ul>
    </div>
  </JqxExpander>
</template>
 
<script>
  import JqxExpander from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxexpander.vue';
 
  export default {
    components: {
      JqxExpander
    },
    mounted: function () {
      this.$refs.myExpander.collapse();
    }
  }
</script>

This method is disabling the expander.

<template>
  <JqxExpander ref="myExpander"
    :width="350">
    <div>Early History of the Internet</div>
    <div> 
      <ul> 
        <li>1961 First packet-switching papers</li>
        <li>1966 Merit Network founded</li>
        <li>1966 ARPANET planning starts</li>
        <li>1969 ARPANET carries its first packets</li>
        <li>1970 Mark I network at NPL (UK)</li>
        <li>1971 Tymnet packet-switched network</li>
        <li>1973 CYCLADES network demonstrated</li>
        <li>1974 Telenet packet-switched network</li>
        <li>1980 Ethernet standard introduced</li>
      </ul>
    </div>
  </JqxExpander>
</template>
 
<script>
  import JqxExpander from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxexpander.vue';
 
  export default {
    components: {
      JqxExpander
    },
    mounted: function () {
      this.$refs.myExpander.disable();
    }
  }
</script>

This method destroys the expander.

<template>
  <JqxExpander ref="myExpander"
    :width="350">
    <div>Early History of the Internet</div>
    <div> 
      <ul> 
        <li>1961 First packet-switching papers</li>
        <li>1966 Merit Network founded</li>
        <li>1966 ARPANET planning starts</li>
        <li>1969 ARPANET carries its first packets</li>
        <li>1970 Mark I network at NPL (UK)</li>
        <li>1971 Tymnet packet-switched network</li>
        <li>1973 CYCLADES network demonstrated</li>
        <li>1974 Telenet packet-switched network</li>
        <li>1980 Ethernet standard introduced</li>
      </ul>
    </div>
  </JqxExpander>
</template>
 
<script>
  import JqxExpander from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxexpander.vue';
 
  export default {
    components: {
      JqxExpander
    },
    mounted: function () {
      this.$refs.myExpander.destroy();
    }
  }
</script>

This method is enabling the expander.

<template>
    <JqxExpander ref="myExpander"
                 :width="350">
        <div>Early History of the Internet</div>
        <div>
            <ul>
                <li>1961 First packet-switching papers</li>
                <li>1966 Merit Network founded</li>
                <li>1966 ARPANET planning starts</li>
                <li>1969 ARPANET carries its first packets</li>
                <li>1970 Mark I network at NPL (UK)</li>
                <li>1971 Tymnet packet-switched network</li>
                <li>1973 CYCLADES network demonstrated</li>
                <li>1974 Telenet packet-switched network</li>
                <li>1980 Ethernet standard introduced</li>
            </ul>
        </div>
    </JqxExpander>
</template>
<script>
    import JqxExpander from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxexpander.vue';
    export default {
        components: {
            JqxExpander
        },
        mounted: function () {
            this.$refs.myExpander.disable();
            setTimeout(_ => this.$refs.myExpander.enable(), 1000);      
        }
    }
</script>

Method used for expanding the expander's content.

<template>
    <JqxExpander ref="myExpander"
                 :width="350">
        <div>Early History of the Internet</div>
        <div>
            <ul>
                <li>1961 First packet-switching papers</li>
                <li>1966 Merit Network founded</li>
                <li>1966 ARPANET planning starts</li>
                <li>1969 ARPANET carries its first packets</li>
                <li>1970 Mark I network at NPL (UK)</li>
                <li>1971 Tymnet packet-switched network</li>
                <li>1973 CYCLADES network demonstrated</li>
                <li>1974 Telenet packet-switched network</li>
                <li>1980 Ethernet standard introduced</li>
            </ul>
        </div>
    </JqxExpander>
</template>
<script>
    import JqxExpander from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxexpander.vue';
    export default {
        components: {
            JqxExpander
        },
        mounted: function () {
            this.$refs.myExpander.collapse();
            setTimeout(_ => this.$refs.myExpander.expand(), 1000);
        }
    }
</script>

This method focuses on the expander. When the widget is focused, keyboard navigation can be used. Here is a list of the keys, supported by jqxExpander and their function:

• Enter/Spacebar - if the focus is on the header, collapses or expands the widget.
• Tab - focuses on the header or the next element in the DOM.
• Ctrl+Up arrow - if the focus is on the content, focuses on the header.
• Ctrl+Down arrow - if the focus is on the header, focuses on the content.

<template>
  <JqxExpander ref="myExpander"
    :width="350">
    <div>Early History of the Internet</div>
    <div> 
      <ul> 
        <li>1961 First packet-switching papers</li>
        <li>1966 Merit Network founded</li>
        <li>1966 ARPANET planning starts</li>
        <li>1969 ARPANET carries its first packets</li>
        <li>1970 Mark I network at NPL (UK)</li>
        <li>1971 Tymnet packet-switched network</li>
        <li>1973 CYCLADES network demonstrated</li>
        <li>1974 Telenet packet-switched network</li>
        <li>1980 Ethernet standard introduced</li>
      </ul>
    </div>
  </JqxExpander>
</template>
 
<script>
  import JqxExpander from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxexpander.vue';
 
  export default {
    components: {
      JqxExpander
    },
    mounted: function () {
      this.$refs.myExpander.focus();
    }
  }
</script>

Getting expander's content. Returns a string with the content's HTML.

<template>
  <JqxExpander ref="myExpander"
    :width="350">
    <div>Early History of the Internet</div>
    <div> 
      <ul> 
        <li>1961 First packet-switching papers</li>
        <li>1966 Merit Network founded</li>
        <li>1966 ARPANET planning starts</li>
        <li>1969 ARPANET carries its first packets</li>
        <li>1970 Mark I network at NPL (UK)</li>
        <li>1971 Tymnet packet-switched network</li>
        <li>1973 CYCLADES network demonstrated</li>
        <li>1974 Telenet packet-switched network</li>
        <li>1980 Ethernet standard introduced</li>
      </ul>
    </div>
  </JqxExpander>
</template>
 
<script>
  import JqxExpander from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxexpander.vue';
 
  export default {
    components: {
      JqxExpander
    },
    mounted: function () {
      const value = this.$refs.myExpander.getContent();
    }
  }
</script>

Getting expander's header content. Returns a string with the header's HTML.

<template>
  <JqxExpander ref="myExpander"
    :width="350">
    <div>Early History of the Internet</div>
    <div> 
      <ul> 
        <li>1961 First packet-switching papers</li>
        <li>1966 Merit Network founded</li>
        <li>1966 ARPANET planning starts</li>
        <li>1969 ARPANET carries its first packets</li>
        <li>1970 Mark I network at NPL (UK)</li>
        <li>1971 Tymnet packet-switched network</li>
        <li>1973 CYCLADES network demonstrated</li>
        <li>1974 Telenet packet-switched network</li>
        <li>1980 Ethernet standard introduced</li>
      </ul>
    </div>
  </JqxExpander>
</template>
 
<script>
  import JqxExpander from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxexpander.vue';
 
  export default {
    components: {
      JqxExpander
    },
    mounted: function () {
      const value = this.$refs.myExpander.getHeaderContent();
    }
  }
</script>

This method refreshes the expander.

<template>
  <JqxExpander ref="myExpander"
    :width="350">
    <div>Early History of the Internet</div>
    <div> 
      <ul> 
        <li>1961 First packet-switching papers</li>
        <li>1966 Merit Network founded</li>
        <li>1966 ARPANET planning starts</li>
        <li>1969 ARPANET carries its first packets</li>
        <li>1970 Mark I network at NPL (UK)</li>
        <li>1971 Tymnet packet-switched network</li>
        <li>1973 CYCLADES network demonstrated</li>
        <li>1974 Telenet packet-switched network</li>
        <li>1980 Ethernet standard introduced</li>
      </ul>
    </div>
  </JqxExpander>
</template>
 
<script>
  import JqxExpander from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxexpander.vue';
 
  export default {
    components: {
      JqxExpander
    },
    mounted: function () {
      this.$refs.myExpander.invalidate();
    }
  }
</script>

This method refreshes the expander.

<template>
  <JqxExpander ref="myExpander"
    :width="350">
    <div>Early History of the Internet</div>
    <div> 
      <ul> 
        <li>1961 First packet-switching papers</li>
        <li>1966 Merit Network founded</li>
        <li>1966 ARPANET planning starts</li>
        <li>1969 ARPANET carries its first packets</li>
        <li>1970 Mark I network at NPL (UK)</li>
        <li>1971 Tymnet packet-switched network</li>
        <li>1973 CYCLADES network demonstrated</li>
        <li>1974 Telenet packet-switched network</li>
        <li>1980 Ethernet standard introduced</li>
      </ul>
    </div>
  </JqxExpander>
</template>
 
<script>
  import JqxExpander from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxexpander.vue';
 
  export default {
    components: {
      JqxExpander
    },
    mounted: function () {
      this.$refs.myExpander.refresh();
    }
  }
</script>

This method renders the expander.

<template>
  <JqxExpander ref="myExpander"
    :width="350">
    <div>Early History of the Internet</div>
    <div> 
      <ul> 
        <li>1961 First packet-switching papers</li>
        <li>1966 Merit Network founded</li>
        <li>1966 ARPANET planning starts</li>
        <li>1969 ARPANET carries its first packets</li>
        <li>1970 Mark I network at NPL (UK)</li>
        <li>1971 Tymnet packet-switched network</li>
        <li>1973 CYCLADES network demonstrated</li>
        <li>1974 Telenet packet-switched network</li>
        <li>1980 Ethernet standard introduced</li>
      </ul>
    </div>
  </JqxExpander>
</template>
 
<script>
  import JqxExpander from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxexpander.vue';
 
  export default {
    components: {
      JqxExpander
    },
    mounted: function () {
      this.$refs.myExpander.render();
    }
  }
</script>

This method is setting specific content to the expander's header.

<template>
  <JqxExpander ref="myExpander"
    :width="350">
    <div>Early History of the Internet</div>
    <div> 
      <ul> 
        <li>1961 First packet-switching papers</li>
        <li>1966 Merit Network founded</li>
        <li>1966 ARPANET planning starts</li>
        <li>1969 ARPANET carries its first packets</li>
        <li>1970 Mark I network at NPL (UK)</li>
        <li>1971 Tymnet packet-switched network</li>
        <li>1973 CYCLADES network demonstrated</li>
        <li>1974 Telenet packet-switched network</li>
        <li>1980 Ethernet standard introduced</li>
      </ul>
    </div>
  </JqxExpander>
</template>
 
<script>
  import JqxExpander from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxexpander.vue';
 
  export default {
    components: {
      JqxExpander
    },
    mounted: function () {
      this.$refs.myExpander.setHeaderContent('New Header');
    }
  }
</script>

This method is setting specific content to the expander.

<template>
  <JqxExpander ref="myExpander"
    :width="350">
    <div>Early History of the Internet</div>
    <div> 
      <ul> 
        <li>1961 First packet-switching papers</li>
        <li>1966 Merit Network founded</li>
        <li>1966 ARPANET planning starts</li>
        <li>1969 ARPANET carries its first packets</li>
        <li>1970 Mark I network at NPL (UK)</li>
        <li>1971 Tymnet packet-switched network</li>
        <li>1973 CYCLADES network demonstrated</li>
        <li>1974 Telenet packet-switched network</li>
        <li>1980 Ethernet standard introduced</li>
      </ul>
    </div>
  </JqxExpander>
</template>
 
<script>
  import JqxExpander from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxexpander.vue';
 
  export default {
    components: {
      JqxExpander
    },
    mounted: function () {
      this.$refs.myExpander.setContent('New Awesome Content!');
    }
  }
</script>