Bonsoir, j'ai un boxflex "table" de deux ligne, avec un bouton entre les deux lignes, je veux que ma deuxième ligne se superpose et prend toute la hauteur de la "table" après le clic, et que ma première ligne se cache derrière la deuxième.

<template>
  <div class="flex-container">
    <div class="table">
      <div class="row row1">
        <div class="item">ligne 1</div>
      </div>
      <button class="toggle-button" @click="toggleRow">-</button>
      <div :class="{ 'row2-expanded': expanded }" class="row row2">
        <div class="item">ligne 2</div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      expanded: false
    };
  },
  methods: {
    toggleRow() {
      this.expanded = !this.expanded;
    }
  }
};
</script>

<style>
.flex-container {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
  width: 100vw;
  border: solid 2px red;
}

.table {
  width: 80vw;
  height: 80vh;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  border: solid 2px red;
}

.row {
  width: 100%;
  padding: 10px;
  border: 1px solid #ccc;
  transition: transform 0.3s;
  height: 40vh;
  overflow: hidden;
}

.row1 {
  background-color: lightblue;
  overflow: hidden;
  position: sticky;
}

.row2 {
  background-color: lightgreen;
  transition: height 0.3s;
}

.row2-expanded {
  height: 900vh; /* Hauteur après le clic */
  overflow: hidden;
  /* transition: flex 0.3s, width 0.3s, padding 0.3s; */
}

.toggle-button {
  background-color: #aea9a1;
  color: white;
  border: none;
  padding: 0px 0px;
  cursor: pointer;
}
.item {
  /* flex-grow: 1; */
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: lightgray;
  height: 100%; /* Take up full height of the row */
}
</style>

avant le clique 

apres le clic, voici le probleme (ligne 1 apparait toujours) je veux cacher carrement la ligne 1. 

merci par avance. 

-
Edité par Russita 10 août 2023 à 17:51:48