Page de test : Différence entre versions

[version vérifiée][version vérifiée]
Ligne 1 : Ligne 1 :
<div id="mw-mywiki-example"></div>
+
<div id="tabber-container">
 
<div style="display: flex; flex-direction: row; column-gap: 10px; background: rgba(0,0,0,.1); padding: 5px; border: 1px black solid; border-bottom: 1px black;">
 
<div style="display: flex; flex-direction: row; column-gap: 10px; background: rgba(0,0,0,.1); padding: 5px; border: 1px black solid; border-bottom: 1px black;">
<div class="button" style="background: rgba(0,0,0,.2);">button 1</div>
+
<div class="button tabber-active" id="0">button 1</div>
<div class="button">button 2</div>
+
<div class="button" id="1">button 2</div>
<div class="button">button 3</div>
+
<div class="button" id="2">button 3</div>
<div class="button">button 4</div>
+
<div class="button" id="3">button 4</div>
 
</div>
 
</div>
<div style="border: 1px black solid; padding: 5px;">
+
<div id="tabber-texte" style="border: 1px black solid; padding: 5px;">
<div id="texte-ank" style="display: block;">content 1 content 1 content 1 content 1 content 1 content 1 content 1 content 1 content 1 content 1 content 1 content 1 content 1 content 1 content 1 content 1 content 1 content 1 content 1 content 1 content 1</div>
+
<div class="tabber-noactive tabber-active" id="0">content 1 content 1 content 1 content 1 content 1 content 1 content 1 content 1 content 1 content 1 content 1 content 1 content 1 content 1 content 1 content 1 content 1 content 1 content 1 content 1 content 1</div>
<div id="texte-ank" style="display: none;">content 2</div>
+
<div class="tabber-noactive" id="1">content 2</div>
<div id="texte-ank" style="display: none;">content 3</div>
+
<div class="tabber-noactive" id="2">content 3</div>
<div id="texte-ank" style="display: none;">content 4</div>
+
<div class="tabber-noactive" id="3"><div id="tabber-container">
 +
<div style="display: flex; flex-direction: row; column-gap: 10px; background: rgba(0,0,0,.1); padding: 5px; border: 1px black solid; border-bottom: 1px black;">
 +
<div class="button tabber-active" id="0">button 1</div>
 +
<div class="button" id="1">button 2</div>
 +
<div class="button" id="2">button 3</div>
 +
<div class="button" id="3">button 4</div>
 +
</div>
 +
<div id="tabber-texte" style="border: 1px black solid; padding: 5px;">
 +
<div class="tabber-noactive tabber-active" id="0">content 1 content 1 content 1 content 1 content 1 content 1 content 1 content 1 content 1 content 1 content 1 content 1 content 1 content 1 content 1 content 1 content 1 content 1 content 1 content 1 content 1</div>
 +
<div class="tabber-noactive" id="1">content 2</div>
 +
<div class="tabber-noactive" id="2">content 3</div>
 +
<div class="tabber-noactive" id="3"><div id="tabber-container">
 +
<div style="display: flex; flex-direction: row; column-gap: 10px; background: rgba(0,0,0,.1); padding: 5px; border: 1px black solid; border-bottom: 1px black;">
 +
<div class="button tabber-active" id="0">button 1</div>
 +
<div class="button" id="1">button 2</div>
 +
<div class="button" id="2">button 3</div>
 +
<div class="button" id="3">button 4</div>
 +
  <div class="button" id="4">button 5</div>
 +
 
 
</div>
 
</div>
 +
<div id="tabber-texte" style="border: 1px black solid; padding: 5px;">
 +
<div class="tabber-noactive tabber-active" id="0">content 1 content 1 content 1 content 1 content 1 content 1 content 1 content 1 content 1 content 1 content 1 content 1 content 1 content 1 content 1 content 1 content 1 content 1 content 1 content 1 content 1</div>
 +
<div class="tabber-noactive" id="1">content 2</div>
 +
<div class="tabber-noactive" id="2">content 3</div>
 +
<div class="tabber-noactive" id="3">content 4</div>
 +
  <div class="tabber-noactive" id="4">content 5</div>
  
<div id="mw-mywiki-example"></div>
 
<div style="display: flex; flex-direction: row; column-gap: 10px; background: rgba(0,0,0,.1); padding: 5px; border: 1px black solid; border-bottom: 1px black;">
 
<div class="button" style="background: rgba(0,0,0,.2);">button 1</div>
 
<div class="button">button 2</div>
 
<div class="button">button 3</div>
 
<div class="button">button 4</div>
 
 
</div>
 
</div>
<div style="border: 1px black solid; padding: 5px;">
+
</div></div>
<div id="texte-ank" style="display: block;">content 1 content 1 content 1 content 1 content 1 content 1 content 1 content 1 content 1 content 1 content 1 content 1 content 1 content 1 content 1 content 1 content 1 content 1 content 1 content 1 content 1</div>
+
</div>
<div id="texte-ank" style="display: none;">content 2</div>
+
</div></div>
<div id="texte-ank" style="display: none;">content 3</div>
+
</div>
<div id="texte-ank" style="display: none;">content 4</div>
 
 
</div>
 
</div>

Version du 22 septembre 2021 à 20:45

button 1
button 2
button 3
button 4
content 1 content 1 content 1 content 1 content 1 content 1 content 1 content 1 content 1 content 1 content 1 content 1 content 1 content 1 content 1 content 1 content 1 content 1 content 1 content 1 content 1
content 2
content 3
button 1
button 2
button 3
button 4
content 1 content 1 content 1 content 1 content 1 content 1 content 1 content 1 content 1 content 1 content 1 content 1 content 1 content 1 content 1 content 1 content 1 content 1 content 1 content 1 content 1
content 2
content 3
button 1
button 2
button 3
button 4
button 5
content 1 content 1 content 1 content 1 content 1 content 1 content 1 content 1 content 1 content 1 content 1 content 1 content 1 content 1 content 1 content 1 content 1 content 1 content 1 content 1 content 1
content 2
content 3
content 4
content 5