True Single Checkout Page On Bigcommerce

Currently BigCommerce has this hide/show effect only displaying one step of the checkout process at a time. It's rather an annoying accordion. I am trying to have the accordion inf

Solution 1:

I could get the top three accordions open at the same time (the bottom ones are shipping methods and order confirmations, which I think are tied to the previous steps)

$('.ExpressCheckoutBlockCollapsed').addClass('ExpressCheckoutBlockCompleted')
$('.ExpressCheckoutBlockCollapsed').removeClass('ExpressCheckoutBlockCollapsed')

I think if you have this code trigger on the checkout page, it might help a little. Regarding changing the order of elements, chrome console shows the following IDs associated with these elements, can't you anchor them to different locations, as you need it?

$('.ExpressCheckoutBlockCollapsed').addClass('ExpressCheckoutBlockCompleted')
[
<divclass=​"ClearExpressCheckoutBlockExpressCheckoutBlockCompleted" id=​"CheckoutStepBillingAddress" style=​"cursor:​ default;​">​…​</div>​
, 
<divclass=​"ClearExpressCheckoutBlockExpressCheckoutBlockCollapsedExpressCheckoutBlockCompleted" id=​"CheckoutStepShippingAddress" style>​…​</div>​
, 
<divclass=​"ClearExpressCheckoutBlockExpressCheckoutBlockCollapsedExpressCheckoutBlockCompleted" id=​"CheckoutStepShippingProvider" style>​…​</div>​
, 
<divclass=​"ClearExpressCheckoutBlockExpressCheckoutBlockCollapsedExpressCheckoutBlockCompleted" id=​"CheckoutStepConfirmation">​…​</div>​
, 
<divclass=​"ClearExpressCheckoutBlockExpressCheckoutBlockCollapsedExpressCheckoutBlockCompleted" id=​"CheckoutStepPaymentDetails" style=​"display:​ none">​…​</div>​
]