diff --git a/src/block/accordion/frontend-accordion.js b/src/block/accordion/frontend-accordion.js
index 93693f48e9..e49d9ff7f6 100644
--- a/src/block/accordion/frontend-accordion.js
+++ b/src/block/accordion/frontend-accordion.js
@@ -87,7 +87,7 @@ class StackableAccordion {
 				}
 
 				el.classList[
-					! Array.from( el.classList ).includes( 'stk--is-open' ) ? 'add' : 'remove'
+					el.open ? 'add' : 'remove'
 				]( 'stk--is-open' )
 
 				// When the accordion is triggered to open/close, we animate
diff --git a/src/components/block-css/index.js b/src/components/block-css/index.js
index 1383eba268..0274473d92 100644
--- a/src/components/block-css/index.js
+++ b/src/components/block-css/index.js
@@ -304,11 +304,11 @@ const BlockCss = props => {
 	// TODO: why do we have this condition for the collapsedSelector, but they just do the same prepending??
 	if ( hasCollapsed ) {
 		if ( generateForAllBlockStates ) {
-			collapsedSelector = prependClass( selector, '%h :where(.stk-block-accordion.stk--is-open) .%s' )
+			collapsedSelector = prependClass( selector, '%h :where(.stk-block-accordion:not(.stk--is-open)) .%s' )
 		} else if ( blockState === 'collapsed' ) {
-			collapsedSelector = prependClass( selector, ':where(.stk-block-accordion.stk--is-open) .%s' )
+			collapsedSelector = prependClass( selector, ':where(.stk-block-accordion:not(.stk--is-open)) .%s' )
 		} else {
-			collapsedSelector = prependClass( selector, ':where(.stk-block-accordion.stk--is-open) .%s' )
+			collapsedSelector = prependClass( selector, ':where(.stk-block-accordion:not(.stk--is-open)) .%s' )
 		}
 	}