Good day,
I am in need of a fixed-height HTML/CSS/JS accordion. The requirement is for the accordion container's height to be fixed (100% body height) and for any panel content overflow, the scrollbar should appear inside the panel's content div rather than the accordion container itself! I have created a pen:
https://codepen.io/lotrmj/pen/bGJEzrpIs it feasible to add animation for the expand/collapse action similar to: https://vuetifyjs.com/en/components/expansion-panels/#variant ? Or is it not possible due to the variable height of panel headers and their corresponding contents? If it can be done, could someone provide me with some assistance?
I have accomplished this previously using the jQuery UI library, but I am looking for more contemporary solutions/libraries...
I attempted to find examples but came up empty-handed on similar issues.
<template>
<div id="nav">
<template v-for="i in 5">
<div class="panel-header">
<span>PANEL {{i}}</span>
<button @click="expandOrCollapse(i)">{{i == activePanel ? "Collapse" : "Expand"}}</button>
</div>
<div class="panel-content" v-if="i == activePanel">
<div class="content">
Very long panel {{i}} content with scrollbar...
</div>
</div>
</template>
</div>
<div id="main">MAIN DIV</div>
</template>
<script>
export default {
data() {
return {
activePanel: 2
};
},
methods: {
expandOrCollapse(i) {
if (i == this.activePanel) {
this.activePanel = undefined;
} else {
this.activePanel = i;
}
}
}
};
</script>
<style>
html, body {
height: 100%;
margin: 0;
}
body {
display: flex;
}
#app {
flex-grow: 1;
display: flex;
}
#nav {
width: 400px;
border-right: 1px solid #ccc;
overflow: auto;
display: flex;
flex-direction: column;
}
#main {
flex-grow: 1;
display: flex;
align-items: center;
justify-content: center;
}
.panel-header, .panel-content {
border-bottom: 1px solid #ddd;
padding: 5px;
}
.panel-header span {
padding-right: 3px;
}
.panel-content {
overflow: auto;
flex-grow: 1;
}
.content {
height: 1000px;
}
</style>