I have something similar to accordion in vuejs, when i click on it, it shows specifications, when i click again on it, it hides the specifications, its working fine on desktop, but on mobile screen the div opens upward/upside, don’t know why. I need that it should open downward. I can’t given static height, as the data is dynamic.
Below is my code:
<template>
<div
class="bg-white border boder-light px-4 relative"
>
<div @click="show = !show" class="py-3 cursor-pointer">
<h1 class="text-xl m-0" :class="[show ? 'text-black' : 'text-blue-600']">{{getLabel('Specifications')}}</h1>
<div class="text-primary text-[25px] absolute top-4 right-8">
<i v-if="!show" class="fa fa-angle-down"></i>
<i v-else class="fa fa-angle-up"></i>
</div>
</div>
<div :class="{'flex': show, '!hidden': !show}" class="row gy-1 mb-4 cursor-default">
<hr class="my-[9px] bg-gray-400" />
<dl class="custom-columns">
<template v-for="(item, innerIndex) in data" :key="innerIndex">
<div>
<dt class="text-gray-500 text-base font-normal">{{ getLabel(item.title) }}</dt>
<dd class="text-md py-1 text-sm vehicle-details-span" v-if="item.value">{{ getLabel(item.value)}}</dd>
<dd class="text-md py-1 text-sm vehicle-details-dash-span" v-else>-</dd>
</div>
</template>
</dl>
</div>
</div>
</template>
<script>
import { mapGetters } from "vuex";
import {
getLabel as getLabelHelper, checkIfInputIsOptional as checkIfInputIsOptionalHelper
} from "../Utils/helper.js"
export default {
props: {
data: {
type: Array,
},
},
data() {
return {
show: false,
}
},
computed:{
...mapGetters(["allLabels"]),
...mapGetters(["selectedLang"]),
},
methods:{
getLabel(currentLabel) {
return getLabelHelper(currentLabel, this.allLabels)
},
checkIfInputIsOptional(currentLabel) {
return checkIfInputIsOptionalHelper(currentLabel, this.allLabels)
}
}
}
</script>
On Desktop sreen, div opens downward, but on mobile div opens upward, page doesn’t scrolls, user stays where he was, the only problem is it should open downwards.
please check my above code, i have tried several different things, but nothing worked.
Check the image:
enter image description here // Spesifikasjoner means Specifications
