次のようなアコーディオン設定への基本的なレスポンシブ タブがあります。
// Based on: http://codepen.io/jacmaes/pen/miBKI
// initialise when dom is ready
$(document).ready(function() {
// initialise if .accordion is on the page
if ($('.accordion')[0]) {
// desktop initialisation
if ($(window).width() > 736) {
$('.accordion-content:not(:first)').hide(); // hide all but first tab content on larger viewports
$('.accordion-title:first-child').addClass('active'); // activate first tab
} else { // mobile initialisation
$('.accordion-content').hide(); // hide all content items on narrow viewports
};
// Click functions
$('.accordion-title').on('click', function() {
// desktop click
if ($(window).width() > 736) {
$('.accordion-content').hide(); // hide all content
$(this).next().show().prev().addClass('active').siblings().removeClass('active');
return false; // stop browser jumping when tabs clicked
} else { // mobile click
$(this).toggleClass('active').next().toggle();
return false; // stop browser jumping when tabs clicked
};
});
}
});
#!/cart
また、カートがアクティブ化された場合に URL の末尾に追加する Snipcart も使用します。カートを閉じると#!/
、URL に残ります。
タブをブラウザーの戻るボタンと連動させ、Snipcart とうまく連携させるにはどうすればよいでしょうか?