Shopify javascript 在 Clic 上关闭手风琴

Question

I'm customizing a Shopify store using Archetype Themes Motion v8.0.2. I have found a code to add tabs to my product pages. I've added media queries to my theme.css to display the tabs as an accordion at certain breakpoints. I would like to add code to close the accordion on click. I'm okay with HTML/CSS, but don't know any JS. I found the script online. Any help would be appreciated!

 $(document).ready(function(){ $('ul.shopify-tabs > li').click(function(){ var tab_id = $(this).attr('data-tab'); $(this).parent().find('li').removeClass('current'); $('.shopify-tab-content').removeClass('current'); $(this).addClass('current'); $("#"+tab_id).addClass('current'); }); })

 .section-tab-head { background: #efefef; color: #333; display: block; padding: 10px 10px; cursor: pointer; margin: 2px; } @media only screen and (min-width: 481px) and (max-width: 768px), (min-width: 1051px) {.section-tab-head { background: none; display: inline-block; margin: inherit; margin-top: 0; } }.section-tab-head.current { background: #dbdbdb; color: #333; }.shopify-tab-content { display: none; background: none; padding: 15px; width: 100%; }.shopify-tab-content > p { font-size: 10pt; font-weight: 400; }.shopify-tab-content.current { display: block; font-size: 10pt; background: white; margin-top: 0px; }.shopify-tab-content > ul { list-style: disc; }.shopify-tab-content > ul ul { list-style: circle; } li, .shopify-tab-content { margin: 10px 0; }.shopify-tabs.shopify-tab-content { float: left; }

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <ul class="shopify-tabs"> <li class="section-tab-head current" data-tab="section-tab-1"> Heading 1</li> <div id="section-tab-1" class="shopify-tab-content current"> <p>some content goes here</p> </div> <li class="section-tab-head" data-tab="section-tab-2"> Heading 2</li> <div id="section-tab-2" class="shopify-tab-content"> <p>more content in this tab</p> </div> <li class="section-tab-head" data-tab="section-tab-3"> Heading 3</li> <div id="section-tab-3" class="shopify-tab-content"> <p>some content is in list form:</p> <ul> <li>product feature</li> <li>product feature</li> <li>product feature</li> </ul> </div> </ul>

Answer 1

Add close button to each tab and add jquery code.

$('ul.shopify-tabs > li .close').click(function(){
  $(this).parent().removeClass('current');
});