let currentContainerIndex = 0; // Index du container actuel
const containers = document.querySelectorAll("#additionalContainers .container");
function toggleContainers() {
if (currentContainerIndex < containers.length) {
containers[currentContainerIndex].classList.remove("hidden");
currentContainerIndex++;
} else {
currentContainerIndex = 0; // Réinitialiser l'index
containers.forEach(container => container.classList.add("hidden")); // Cacher tous les containers
}
}
.container {
/*Container du texte et de l'image*/
display: flex;
justify-content: space-between;
margin: 20px auto;
width: 85%;
max-width: 1200px;
gap: 20px;
background-color: #d2d4e7;
padding: 10px;
border-radius: 10px;
box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.1);
}
.container:hover {
box-shadow: 0px 6px 20px rgba(0, 0, 0, 0.2);
}
.sectiontext,
.sectionimage {
/*Sections*/
flex: 1;
background-color: #edefff;
padding: 20px;
box-sizing: border-box;
border: 2px solid #464e73;
border-radius: 10px;
transition: all 0.3s ease-in-out;
}
.sectiontext:hover,
.sectionimage:hover {
transform: scale(1.02);
box-shadow: 0px 8px 15px rgba(0, 0, 0, 0.2);
border-color: #6a82e8;
}
.sectionimage img {
/*Image*/
width: 100%;
height: 100%;
object-fit: cover;
border-radius: inherit;
}
.hidden {
display: none;
}
.container {
margin-bottom: 20px;
}
.arrow {
cursor: pointer;
font-size: 24px;
margin: 10px 0;
}
<div class="sectiontext">
<h2>Voyager à Londres pendant les vacances de Noël</h2>
<p>Ici, vous allez comprendre à quel point Londres est une destination parfaite pour des vacances à la période de Noël.</p>
<p>La ville est magnifiquement décorée avec des lumières scintillantes et des marchés de Noël animés.</p>
<p>Vous pouvez également profiter de la patinoire en plein air et des spectacles de Noël.</p>
<p>Ne manquez pas de visiter les célèbres attractions touristiques comme le London Eye, le Tower Bridge et le Palais de Buckingham.</p>
<p>Vous pouvez également faire du shopping dans les grands magasins de Londres et déguster des plats délicieux dans les restaurants de la ville.</p>
<p>Alors, préparez-vous à vivre une expérience inoubliable à Londres pendant les vacances de Noël !</p>
</div>
<div class="sectionimage">
<img src="images/londoneye.jpg" alt="Image du London Eye de nuit" />
</div>
</div>
<div class="arrow" onclick="toggleContainers()">→ Voir plus</div>
<div id="additionalContainers" class="hidden">
<div class="container">
<div class="sectiontext">
<h2>Les marchés de Noël</h2>
<p>Les marchés de Noël à Londres sont un incontournable. Vous y trouverez des cadeaux artisanaux, des décorations et des spécialités culinaires.</p>
</div>
<div class="sectionimage">
<img src="images/marche_noel.jpg" alt="Marché de Noël à Londres" />
</div>
</div>
<div class="container">
<div class="sectiontext">
<h2>Les spectacles de Noël</h2>
<p>Assistez à des spectacles de Noël dans les théâtres de Londres, avec des performances qui raviront toute la famille.</p>
</div>
<div class="sectionimage">
<img src="images/spectacle_noel.jpg" alt="Spectacle de Noël à Londres" />
</div>
</div>
</div>
</main>
我试图不触摸CSS的身体,因为我在同一样式表中还有其他9页,所以我猜它会改变。如果您需要其他细节问我如果您向我解释该怎么办,那将很棒!
这样的东西,也许?
这个想法是所有容器均处于相同的...含容器的容器中,因此它们易于迭代,并且易于根据当前选择的索引隐藏(并且使用相同的功能来初始化隐藏状态,并在可见索引更改时进行更新)。
.container {
/*Container du texte et de l'image*/
display: flex;
justify-content: space-between;
margin: 20px auto;
width: 85%;
max-width: 1200px;
gap: 20px;
background-color: #d2d4e7;
padding: 10px;
border-radius: 10px;
box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.1);
}
.container:hover {
box-shadow: 0px 6px 20px rgba(0, 0, 0, 0.2);
}
.sectiontext,
.sectionimage {
/*Sections*/
flex: 1;
background-color: #edefff;
padding: 20px;
box-sizing: border-box;
border: 2px solid #464e73;
border-radius: 10px;
transition: all 0.3s ease-in-out;
}
.sectiontext:hover,
.sectionimage:hover {
transform: scale(1.02);
box-shadow: 0px 8px 15px rgba(0, 0, 0, 0.2);
border-color: #6a82e8;
}
.sectionimage img {
/*Image*/
width: 100%;
height: 100%;
object-fit: cover;
border-radius: inherit;
}
.hidden {
display: none;
}
.container {
margin-bottom: 20px;
}
.arrow {
cursor: pointer;
font-size: 24px;
margin: 10px 0;
}
<div id="containers">
<div class="container">
<div class="sectiontext">
<h2>Voyager à Londres pendant les vacances de Noël</h2>
<p>Ici, vous allez comprendre à quel point Londres est une destination parfaite pour des vacances à la période de Noël.</p>
<p>La ville est magnifiquement décorée avec des lumières scintillantes et des marchés de Noël animés.</p>
<p>Vous pouvez également profiter de la patinoire en plein air et des spectacles de Noël.</p>
<p>Ne manquez pas de visiter les célèbres attractions touristiques comme le London Eye, le Tower Bridge et le Palais de Buckingham.</p>
<p>Vous pouvez également faire du shopping dans les grands magasins de Londres et déguster des plats délicieux dans les restaurants de la ville.</p>
<p>Alors, préparez-vous à vivre une expérience inoubliable à Londres pendant les vacances de Noël !</p>
</div>
<div class="sectionimage">
<img src="images/londoneye.jpg" alt="Image du London Eye de nuit" />
</div>
</div>
<div class="container">
<div class="sectiontext">
<h2>Les marchés de Noël</h2>
<p>Les marchés de Noël à Londres sont un incontournable. Vous y trouverez des cadeaux artisanaux, des décorations et des spécialités culinaires.</p>
</div>
<div class="sectionimage">
<img src="images/marche_noel.jpg" alt="Marché de Noël à Londres" />
</div>
</div>
<div class="container">
<div class="sectiontext">
<h2>Les spectacles de Noël</h2>
<p>Assistez à des spectacles de Noël dans les théâtres de Londres, avec des performances qui raviront toute la famille.</p>
</div>
<div class="sectionimage">
<img src="images/spectacle_noel.jpg" alt="Spectacle de Noël à Londres" />
</div>
</div>
</div>
<div class="arrow" onclick="toggleContainers()">→ Voir plus</div>