diff --git a/core/misc/vertical-tabs.es6.js b/core/misc/vertical-tabs.es6.js
index 74272d0..5318e09 100644
--- a/core/misc/vertical-tabs.es6.js
+++ b/core/misc/vertical-tabs.es6.js
@@ -84,9 +84,6 @@
           tab_list.append(vertical_tab.item);
           $that
             .removeClass('collapsed')
-            // prop() can't be used on browsers not supporting details element,
-            // the style won't apply to them if prop() is used.
-            .attr('open', true)
             .addClass('vertical-tabs__pane')
             .data('verticalTab', vertical_tab);
           if (this.id === focusID) {
@@ -108,6 +105,15 @@
             tab_focus = $this.find('> .vertical-tabs__pane').eq(0);
           }
         }
+        // If open exists within the set.
+        const $tab = $('[open]', $this);
+        if ($tab.length) {
+          const tabData = $tab.first().data('verticalTab');
+          // If that open has the data attr vertical tab then activate the first tab of the open object.
+           if (tabData) {
+             tab_focus = $tab.first();
+           }
+        }
         if (tab_focus.length) {
           tab_focus.data('verticalTab').focus();
         }
@@ -170,6 +176,7 @@
         .siblings('.vertical-tabs__pane')
         .each(function () {
           const tab = $(this).data('verticalTab');
+          tab.details.attr('open', false);
           tab.details.hide();
           tab.item.removeClass('is-selected');
         })
@@ -177,6 +184,8 @@
         .show()
         .siblings(':hidden.vertical-tabs__active-tab')
         .val(this.details.attr('id'));
+
+      this.details.attr('open', true);
       this.item.addClass('is-selected');
       // Mark the active tab for screen readers.
       $('#active-vertical-tab').remove();