diff --git a/src/Templates/default/html/directives/configuration-block.html.twig b/src/Templates/default/html/directives/configuration-block.html.twig
index 8197c76..6bb6960 100644
--- a/src/Templates/default/html/directives/configuration-block.html.twig
+++ b/src/Templates/default/html/directives/configuration-block.html.twig
@@ -1,9 +1,14 @@
 <div class="configuration-block">
-    <ul class="simple">
+    <ul class="configuration-tabs">
         {% for block in blocks %}
-            <li>
-                <em>{{ block.language }}</em>
-                {{ block.code|raw }}
+            <li data-language="{{ block.language }}" {{ loop.first ? 'data-active="true"' }}>
+                <span>{{ block.language }}</span>
             </li>
         {% endfor %}
     </ul>
+
+    {% for block in blocks %}
+        <div class="configuration-codeblock" data-language="{{ block.language }}" style="{{ not loop.first ? 'display: none' }}">
+            {{ block.code|raw }}
+        </div>
+    {% endfor %}
diff --git a/tests/fixtures/expected/blocks/directives/configuration-block.html b/tests/fixtures/expected/blocks/directives/configuration-block.html
index 25b41bc..6571990 100644
--- a/tests/fixtures/expected/blocks/directives/configuration-block.html
+++ b/tests/fixtures/expected/blocks/directives/configuration-block.html
@@ -1,23 +1,22 @@
 <div class="configuration-block">
-    <ul class="simple">
-                    <li>
-                <em>YAML</em>
-                <div translate="no" class="notranslate codeblock codeblock-loc-1 codeblock-yaml">
-    <div class="codeblock-scroll">
-        <pre class="codeblock-lines">1</pre>
-        <pre class="codeblock-code"><code><span class="hljs-comment"># app/config/services.yml</span>
-</code></pre>
+    <ul class="configuration-tabs">
+        <li data-language="YAML" data-active="true"> <span>YAML</span> </li>
+        <li data-language="PHP" > <span>PHP</span> </li>
+    </ul>
+    <div class="configuration-codeblock" data-language="YAML" style="">
+        <div translate="no" class="notranslate codeblock codeblock-loc-1 codeblock-yaml">
+            <div class="codeblock-scroll">
+                <pre class="codeblock-lines">1</pre>
+                <pre class="codeblock-code"><code><span class="hljs-comment"># app/config/services.yml</span></code></pre>
+            </div>
+        </div>
     </div>
-</div>
-            </li>
-                    <li>
-                <em>PHP</em>
-                <div translate="no" class="notranslate codeblock codeblock-loc-1 codeblock-php">
-    <div class="codeblock-scroll">
-        <pre class="codeblock-lines">1</pre>
-        <pre class="codeblock-code"><code><span class="hljs-comment">// config/routes.php</span>
-</code></pre>
+    <div class="configuration-codeblock" data-language="PHP" style="display: none">
+        <div translate="no" class="notranslate codeblock codeblock-loc-1 codeblock-php">
+            <div class="codeblock-scroll">
+                <pre class="codeblock-lines">1</pre>
+                <pre class="codeblock-code"><code><span class="hljs-comment">// config/routes.php</span></code></pre>
+            </div>
+        </div>
     </div>
 </div>
-            </li>
-            </ul></div>
diff --git a/tests/fixtures/expected/main/datetime.html b/tests/fixtures/expected/main/datetime.html
index c4b798e..ba9d58f 100644
--- a/tests/fixtures/expected/main/datetime.html
+++ b/tests/fixtures/expected/main/datetime.html
@@ -190,10 +190,13 @@ <h3 id="error-bubbling"><a class="headerlink" href="#error-bubbling" title="Perm
 </div>
 <p>And configuration blocks:</p>
 <div class="configuration-block">
-    <ul class="simple">
-                    <li>
-                <em>YAML</em>
-                <div translate="no" class="notranslate codeblock codeblock-loc-1 codeblock-yaml">
+    <ul class="configuration-tabs">
+        <li data-language="YAML" data-active="true"> <span>YAML</span> </li>
+        <li data-language="XML" > <span>XML</span> </li>
+        <li data-language="PHP" > <span>PHP</span> </li>
+    </ul>
+    <div class="configuration-codeblock" data-language="YAML" style="">
+        <div translate="no" class="notranslate codeblock codeblock-loc-1 codeblock-yaml">
     <div class="codeblock-scroll">
         <pre class="codeblock-lines">1
 2
@@ -212,10 +215,9 @@ <h3 id="error-bubbling"><a class="headerlink" href="#error-bubbling" title="Perm
 </code></pre>
     </div>
 </div>
-            </li>
-                    <li>
-                <em>XML</em>
-                <div translate="no" class="notranslate codeblock codeblock-loc-2 codeblock-xml">
+        </div>
+        <div class="configuration-codeblock" data-language="XML" style="display: none">
+            <div translate="no" class="notranslate codeblock codeblock-loc-2 codeblock-xml">
     <div class="codeblock-scroll">
         <pre class="codeblock-lines">1
 2
@@ -260,10 +262,9 @@ <h3 id="error-bubbling"><a class="headerlink" href="#error-bubbling" title="Perm
 </code></pre>
     </div>
 </div>
-            </li>
-                    <li>
-                <em>PHP</em>
-                <div translate="no" class="notranslate codeblock codeblock-loc-2 codeblock-php">
+        </div>
+        <div class="configuration-codeblock" data-language="PHP" style="display: none">
+            <div translate="no" class="notranslate codeblock codeblock-loc-2 codeblock-php">
     <div class="codeblock-scroll">
         <pre class="codeblock-lines">1
 2
@@ -288,8 +289,8 @@ <h3 id="error-bubbling"><a class="headerlink" href="#error-bubbling" title="Perm
 </code></pre>
     </div>
 </div>
-            </li>
-            </ul></div>
+        </div>
+    </div>
 </div>
 </div>
 <div class="section">