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

@@ Ligne 1 : / Ligne 1 : @@
 <div class="infobox" style="width:300px; border:1px solid #aaa; background-color:#f9f9f9;">
    <div style="text-align:center; background:#ccf; padding:5px;">
-     <a href="javascript:void(0);" onclick="showColumn('columnA')" style="margin-right:10px;">{{{titleA|Title A}}}</a>
+     <span class="toggle-column" data-target="columnA" style="cursor:pointer; margin-right:10px; font-weight:bold;">{{{titleA|Title A}}}</span>
-     <a href="javascript:void(0);" onclick="showColumn('columnB')">{{{titleB|Title B}}}</a>
+     <span class="toggle-column" data-target="columnB" style="cursor:pointer;">{{{titleB|Title B}}}</span>
    </div>
-   <div id="columnA" style="text-align:center; display:block; padding:10px;">
+   <div id="columnA" class="infobox-column" style="text-align:center; display:block; padding:10px;">
      {{{dataA|Content for Column A}}}
    </div>
-   <div id="columnB" style="text-align:center; display:none; padding:10px;">
+   <div id="columnB" class="infobox-column" style="text-align:center; display:none; padding:10px;">
      {{{dataB|Content for Column B}}}
    </div>
 </div>
-<script>
-  function showColumn(columnId) {
-    document.getElementById('columnA').style.display = 'none';
-    document.getElementById('columnB').style.display = 'none';
-    document.getElementById(columnId).style.display = 'block';
-  }
-</script>

Dernière version du 2 avril 2025 à 11:36