How to change product view page tabs to accordion?

[denialdesign]

How can I change the tabs on the product view page to an accordion instead of tabs?

So far I've changes this code in Magento_Catalog\templates\product\view\details.phtml from:

<div class="product data items" data-mage-init='{"tabs":{"openedState":"active"}}'>

to this:

<div class="product data items" data-mage-init='{"accordion":{"openedState":"active"}}'>

What else do I need to change?

Thanks.

[themeness]

just some 3 - 4 line css will works to change tab to accordion.

[denialdesign]

That's not a very helpful answer.

I figured it out anyway. Needed to change some selectors and add the required javascript snippets via requirejs.

[seasterling]

Denial Design, can you give details on how you did this? Thanks.

[Easymorris]

add this css to your main css file

.product.data.items {
margin: 0 0 20px;
padding: 0;
}
.product.data.items > .item.title {
box-sizing: border-box;
float: none;
width: 100%;
}
.product.data.items > .item.title > .switch {
display: block;
}
.product.data.items > .item.content {
box-sizing: border-box;
display: block;
float: none;
margin: 0;
}
.product.data.items > .item.content::before, .product.data.items > .item.content::after {
content: "";
display: table;
}
.product.data.items > .item.content::after {
clear: both;
}
.product.data.items > .item.content.active {
display: block;
}
.product.data.items > .item.title {
margin: 0 0 5px;
}
.product.data.items > .item.title > .switch {
background: #f0f0f0 none repeat scroll 0 0;
border-color: #d1d1d1;
border-style: solid;
border-width: 1px;
color: #7d7d7d;
font-size: 1.8rem;
font-weight: 600;
height: 40px;
line-height: 40px;
padding: 5px 20px;
text-decoration: none;
}
.product.data.items > .item.title > .switch:visited {
color: #7d7d7d;
text-decoration: none;
}
.product.data.items > .item.title > .switch:hover {
color: #7d7d7d;
text-decoration: none;
}
.product.data.items > .item.title > .switch:active {
color: #333;
text-decoration: none;
}
.product.data.items > .item.title:not(.disabled) > .switch:focus, .product.data.items > .item.title:not(.disabled) > .switch:hover {
background: #fcfcfc none repeat scroll 0 0;
}
.product.data.items > .item.title:not(.disabled) > .switch:active, .product.data.items > .item.title.active > .switch, .product.data.items > .item.title.active > .switch:focus, .product.data.items > .item.title.active > .switch:hover {
background: #fff none repeat scroll 0 0;
padding-bottom: 5px;
}
.product.data.items > .item.content {
background: #fff none repeat scroll 0 0;
border: 1px solid #d1d1d1;
margin: 0 0 5px;
padding: 20px;
}

[seasterling]

Thanks Easymorris. Where are you putting this in a single file so that it will override existing styles?

[seasterling]

Added it to _sections.less in the desktop media query. Is there a better way to consolidate all these overrides?