diff --git a/core/includes/form.inc b/core/includes/form.inc
index 05b6d29..77443ad 100644
--- a/core/includes/form.inc
+++ b/core/includes/form.inc
@@ -4067,7 +4067,7 @@ function form_pre_render_vertical_tabs($element) {
  */
 function theme_vertical_tabs($variables) {
   $element = $variables['element'];
-  return '<div class="vertical-tabs-panes">' . $element['#children'] . '</div>';
+  return '<div data-vertical-tabs-panes>' . $element['#children'] . '</div>';
 }
 
 /**
diff --git a/core/misc/vertical-tabs.js b/core/misc/vertical-tabs.js
index fe95e8e..a02fa2c 100644
--- a/core/misc/vertical-tabs.js
+++ b/core/misc/vertical-tabs.js
@@ -20,8 +20,8 @@ Drupal.behaviors.verticalTabs = {
       return;
     }
 
-    $(context).find('.vertical-tabs-panes').once('vertical-tabs', function () {
-      var $this = $(this);
+    $(context).find('[data-vertical-tabs-panes]').once('vertical-tabs', function () {
+      var $this = $(this).addClass('vertical-tabs-panes');
       var focusID = $this.find(':hidden.vertical-tabs-active-tab').val();
       var tab_focus;
 
diff --git a/core/modules/system/lib/Drupal/system/Tests/Form/ElementTest.php b/core/modules/system/lib/Drupal/system/Tests/Form/ElementTest.php
index be13136..c491d0e 100644
--- a/core/modules/system/lib/Drupal/system/Tests/Form/ElementTest.php
+++ b/core/modules/system/lib/Drupal/system/Tests/Form/ElementTest.php
@@ -121,9 +121,9 @@ function testGroupElements() {
     $elements = $this->xpath('//fieldset[@id="edit-fieldset"]//div[@id="edit-meta"]//label');
     $this->assertTrue(count($elements) == 1);
     $this->drupalGet('form-test/group-vertical-tabs');
-    $elements = $this->xpath('//div[@class="vertical-tabs-panes"]//details[@id="edit-meta"]//label');
+    $elements = $this->xpath('//div[@data-vertical-tabs-panes]//details[@id="edit-meta"]//label');
     $this->assertTrue(count($elements) == 1);
-    $elements = $this->xpath('//div[@class="vertical-tabs-panes"]//details[@id="edit-meta-2"]//label');
+    $elements = $this->xpath('//div[@data-vertical-tabs-panes]//details[@id="edit-meta-2"]//label');
     $this->assertTrue(count($elements) == 1);
   }
 
diff --git a/core/modules/system/lib/Drupal/system/Tests/Form/ElementsVerticalTabsTest.php b/core/modules/system/lib/Drupal/system/Tests/Form/ElementsVerticalTabsTest.php
index ebdda6b..303b5a9 100644
--- a/core/modules/system/lib/Drupal/system/Tests/Form/ElementsVerticalTabsTest.php
+++ b/core/modules/system/lib/Drupal/system/Tests/Form/ElementsVerticalTabsTest.php
@@ -55,13 +55,13 @@ function testJavaScriptOrdering() {
   function testWrapperNotShownWhenEmpty() {
     // Test admin user can see vertical tabs and wrapper.
     $this->drupalGet('form_test/vertical-tabs');
-    $wrapper = $this->xpath("//div[@class='vertical-tabs-panes']");
+    $wrapper = $this->xpath("//div[@data-vertical-tabs-panes]");
     $this->assertTrue(isset($wrapper[0]), 'Vertical tab panes found.');
 
     // Test wrapper markup not present for non-privileged web user.
     $this->drupalLogin($this->web_user);
     $this->drupalGet('form_test/vertical-tabs');
-    $wrapper = $this->xpath("//div[@class='vertical-tabs-panes']");
+    $wrapper = $this->xpath("//div[@data-vertical-tabs-panes]");
     $this->assertFalse(isset($wrapper[0]), 'Vertical tab wrappers are not displayed to unprivileged users.');
   }
 }
diff --git a/core/themes/seven/vertical-tabs.css b/core/themes/seven/vertical-tabs.css
index 9d63396..2bc1096 100644
--- a/core/themes/seven/vertical-tabs.css
+++ b/core/themes/seven/vertical-tabs.css
@@ -68,15 +68,15 @@
 .vertical-tab-button.selected a:focus {
   color: #007ecc;
 }
-.vertical-tabs-panes {
+[data-vertical-tabs-panes] {
   background-color: #fcfcfa;
 }
-html.js .vertical-tabs-panes {
+.vertical-tabs-panes {
   margin: 0 0 0 240px; /* LTR */
   padding: 10px 15px 10px 15px;
   border-left: 1px solid #a6a5a1; /* LTR */
 }
-html.js[dir="rtl"] .vertical-tabs-panes {
+[dir="rtl"] .vertical-tabs-panes {
   margin: 0 240px 0 0;
   border-left: none;
   border-right: 1px solid #a6a5a1;