Magento 2: how to make some JS elements expanded by default?

Question

In the checkout (Blank theme) there is a block "Order Summary" on the right column.

Inside this block, items in cart are hidden by default. If users want to see the items they have to click an arrow button.

Inspecting the element, the aria-selected and aria-expanded attributes change their value from "false" to "true" when user clicks the arrow.

<div class="title" data-role="title" role="tab" aria-selected="false" aria-expanded="false" tabindex="0">

<div class="title" data-role="title" role="tab" aria-selected="true" aria-expanded="true" tabindex="0">

How can I modify this behavior to display the items by default instead of hiding them?

I want the users to be able to see their items in that block by default.

Answer 1

Copy the file magento_checkout/view/frontend/web/template/summary/cart-item.html to your theme here: theme_directory/Magento_Checkout/web/template/summary/cart-item.html. Modify line 8 like so:

<div class="block items-in-cart" data-bind="mageInit: {'collapsible':{'openedState': 'active', 'active': 'true'}}">

We are adding 'active': 'true' to the js component configuration.

Now delete contents of pub/static and var/view_preprocessed directories and flush the cache. You may also need to flush your browser's cache.