« Modèle:Pays test » : différence entre les versions

Version du 2 avril 2025 à 10:53

 <input type="radio" id="panel1" name="infobox" class="infobox-radio" checked />
 <label for="panel1" class="infobox-label">Panel 1</label>

 <input type="radio" id="panel2" name="infobox" class="infobox-radio" />
 <label for="panel2" class="infobox-label">Panel 2</label>

     Description of Image 1

Description for Image 1

     Description of Image 2

Description for Image 2

@@ Ligne 1 : / Ligne 1 : @@
-/* Hide radio buttons */
+<div style="text-align:center;">
-.infobox-radio {
+  <input type="radio" id="panel1" name="infobox" class="infobox-radio" checked />
-    display: none;
+  <label for="panel1" class="infobox-label">Panel 1</label>
-}
-/* Style labels as buttons */
+  <input type="radio" id="panel2" name="infobox" class="infobox-radio" />
-.infobox-label {
+  <label for="panel2" class="infobox-label">Panel 2</label>
-    cursor: pointer;
-    padding: 5px 15px;
-    border: 1px solid #ccc;
-    background: #eee;
-    margin-right: 5px;
-    display: inline-block;
-}
-/* Style the container */
+  <div class="infobox-container">
-.infobox-container {
+     <div class="infobox-panel" id="content1">
-     border: 1px solid #ccc;
+      [[File:Image1.jpg|250px|alt=Description of Image 1]]
-    padding: 10px;
+      <p>Description for Image 1</p>
-    margin-top: 10px;
+     </div>
-     background: #f9f9f9;
+     <div class="infobox-panel" id="content2">
-     text-align: center;
+      [[File:Image2.jpg|250px|alt=Description of Image 2]]
-}
+      <p>Description for Image 2</p>
+    </div>
-/* Hide both panels by default */
+  </div>
-.infobox-panel {
+</div>
-    display: none;
-}
-/* Show the selected panel */
-#panel1:checked ~ .infobox-container #content1,
-#panel2:checked ~ .infobox-container #content2 {
-    display: block;
-}