Dans l'exemple ci-dessous, le clic sur le div "Click me" fait basculer l'affichage du div "info".
L'affichage ou le masquage du div "info" déplace vers le bas / vers le haut les divs inférieurs (3 et 4 en mon exemple).
Est-il possible de déplacer les divs supérieurs (1 et 2) à la place et de garder les divs inférieurs à leur position?
<div class="upper">1</div> <div class="upper">2</div> <div onclick="clickMe()">Click me</div> <div id="info">info</div> <div class="lower">3</div> <div class="lower">4</div>
.upper {
border: 1px solid red;
}
#info {
font-size: 11px;
}
.lower {
border: 1px solid green;
}
function clickMe() {
var infoDiv = document.getElementById("info");
if (infoDiv.style.display === "none") {
infoDiv.style.display = "block";
} else {
infoDiv.style.display = "none";
}
}
4 Réponses :
Vous pouvez basculer la visibilité au lieu de l'affichage, comme Paulie_D a signalé:
<div class="upper">1</div>
<div class="upper">2</div>
<div onclick="clickMe(document.getElementById('info'))">Click me</div>
<div id="info">info</div>
<div class="lower">3</div>
<div class="lower">4</div>
.upper {
border: 1px solid red;
}
#info {
font-size: 11px;
}
.lower {
border: 1px solid green;
}
const clickMe = ({ style:s }) => s.visibility = s.visibility === "hidden" ? "visible" : "hidden"
Vous pouvez également modifier l'opacité:
<div class="upper">1</div> <div class="upper">2</div> <div onclick="clickMe()">Click me</div> <div id="info">info</div> <div class="lower">3</div> <div class="lower">4</div>
.upper {
border: 1px solid red;
}
#info {
font-size: 11px;
}
.lower {
border: 1px solid green;
}
function clickMe() {
var infoDiv = document.getElementById("info");
if (infoDiv.style.opacity === "0") {
infoDiv.style.opacity = "1";
} else {
infoDiv.style.opacity = "0";
}
}
Une manière plus propre d'écrire votre fonction serait d'utiliser une fonction anonyme, une déstructuration et une instruction ternaire:
<div class="upper">1</div> <div class="upper">2</div> <div onclick="clickMe()">Click me</div> <div id="info">info</div> <div class="lower">3</div> <div class="lower">4</div>
.upper {
border: 1px solid red;
}
#info {
font-size: 11px;
}
.lower {
border: 1px solid green;
}
function clickMe() {
var infoDiv = document.getElementById("info");
if (infoDiv.style.visibility === "hidden") {
infoDiv.style.visibility = "visible";
} else {
infoDiv.style.visibility = "hidden";
}
}
Merci pour la solution mais ce dont j'ai vraiment besoin est de garder les divs inférieurs en place et de déplacer les divs supérieurs sans laisser d'espace vide
Ne pas basculer affichage - basculer visibilité .
La propriété CSS de visibilité affiche ou masque un élément sans modifier la mise en page d'un document.
<div class="upper">1</div> <div class="upper">2</div> <div onclick="clickMe()">Click me</div> <div id="info">info</div> <div class="lower">3</div> <div class="lower">4</div>
.upper {
border: 1px solid red;
}
#info {
font-size: 11px;
}
.lower {
border: 1px solid green;
}
function clickMe() {
var infoDiv = document.getElementById("info");
if (infoDiv.style.visibility === "hidden") {
infoDiv.style.visibility = "visible";
} else {
infoDiv.style.visibility = "hidden";
}
}
Si vous voulez vraiment déplacer les éléments vers le haut au lieu de changer uniquement la visibilité, vous devez envelopper votre contenu avec un conteneur. Et collez tous les articles vers le bas en utilisant flex. Mais le conteneur doit avoir une hauteur fixe:
<div class="wrapper">
<div class="upper">1</div>
<div class="upper">2</div>
<div onclick="clickMe()">Click me</div>
<div id="info">info</div>
<div class="lower">3</div>
<div class="lower">4</div>
</div>
.upper {
border: 1px solid red;
}
#info {
font-size: 11px;
}
.lower {
border: 1px solid green;
}
.wrapper {
display: flex;
height: 150px;
flex-direction: column;
justify-content: flex-end;
}
function clickMe() {
var infoDiv = document.getElementById("info");
if (infoDiv.style.display === "none") {
infoDiv.style.display = "block";
} else {
infoDiv.style.display = "none";
}
}
Merci pour votre suggestion, l'idée est très sympa pour une hauteur fixe, mais malheureusement mon conteneur doit avoir une hauteur réactive liée à son parent
Le basculement de la visibilité ou de l'opacité ne donne pas réellement l'effet que les deux lignes supérieures se déplacent au lieu des deux inférieures Et cela laisse une vilaine ligne blanche là où se trouvaient les informations.
Nous simulons donc cet effet en ajoutant un espace vide égal à la hauteur des informations devant les lignes, afin de pouvoir «pousser» les lignes supérieures vers le haut en modifiant le hauteur de cette rangée de gouttière.
La même chose peut être faite avec margin-top et d'autres méthodes CSS, mais c'était la plus simple à expliquer. :)
<div id="spacer"></div> <div class="upper">1</div> <div class="upper">2</div> <div onclick="clickMe()">Click me</div> <div id="info">info</div> <div class="lower">3</div> <div class="lower">4</div>
.upper {
border: 1px solid red;
}
#info {
font-size: 11px;
height: 16px;
display: none;
}
#spacer {
height: 16px;
}
.lower {
border: 1px solid green;
}
function clickMe() {
var infoDiv = document.getElementById("info");
var spacer = document.getElementById("spacer");
if (infoDiv.style.display === "block") {
infoDiv.style.display = "none";
spacer.style.height = "16px";
} else {
infoDiv.style.display = "block";
spacer.style.height = "0px";
}
}
Non, vous pouvez obtenir cet effet en déplaçant tout. mais seul le déplacement des deux supérieurs déplacera automatiquement les deux inférieurs. Donc, si vous ajoutez la même hauteur de l'information devant la première partie supérieure, tout se déplacera vers le bas de la hauteur de l'information, donnant le visuel des deux supérieurs en mouvement.
ne pas basculer
affichage- basculervisibilité.Vous pouvez modifier l'opacité ou la visibilité plutôt que l'affichage.