1

I'm using some HTML and JS on a Shopify page to allow users to click between tabs in a list - hiding and displaying the correct data based on which link is clicked. Tab1 is loaded as default.

I'm wondering if it's possible to add a hashtag into the URL to preload the ID of the tab i'd like loaded. eg: webpage.com/page1#tab4 to load the page straight to tab 4 tag.

Have done a fair bit of digging but can't seem to figure out a way to do this. Would really appreciate a pointer in the right direction!

Have added the page code below.

Thanks all!

{% for block in section.blocks %}
{% assign page_1 = block.settings.page_handle_one %}
{% assign page_2 = block.settings.page_handle_two %}
{% assign page_3 = block.settings.page_handle_three %}
{% assign page_4 = block.settings.page_handle_four %}
{% assign page_5 = block.settings.page_handle_five %}
{% assign page_6 = block.settings.page_handle_six %}
{% endfor %}
<div class="main_inner_page">
    <div class="main_top_header tabs">
        <ul class="tab-links responsives desktop_tab_view">
            {% for block in section.blocks %}
            <li><a id="tab1" href="#tab1">{{ block.settings.page_title_one }}</a></li>
            <li><a id="tab2" href="#tab2">{{ block.settings.page_title_two }}</a></li>
            <li><a id="tab3" href="#tab3">{{ block.settings.page_title_three }}</a></li>
            <li><a id="tab4" href="#tab4">{{ block.settings.page_title_four }}</a></li>
            <li><a id="tab5" href="#tab5">{{ block.settings.page_title_five }}</a></li>
            <li><a id="tab6" href="#tab6">{{ block.settings.page_title_six }}</a></li>
            {% endfor %}
        </ul>
        <div class=" storeSelecWrap j-store-select selWrap mobile_tab_view">
            <div class="s-dropdown--styled tabs">
                {% for block in section.blocks %}
                <span class="fa fa-angle-down store-default">{{ block.settings.page_title_one }}</span>
                {% endfor %}
                <ul class="s-dropdown u-hide tab-links">
                    {% for block in section.blocks %}
                    <li class="active j-store"><a href="#tab1">{{ block.settings.page_title_one }}</a></li>
                    <li class=" j-store"><a href="#tab2">{{ block.settings.page_title_two }}</a></li>
                    <li class=" j-store"><a href="#tab3">{{ block.settings.page_title_three }}</a></li>
                    <li class=" j-store"><a href="#tab4">{{ block.settings.page_title_four }}</a></li>
                    <li class=" j-store"><a href="#tab5">{{ block.settings.page_title_five }}</a></li>
                    <li class=" j-store"><a href="#tab6">{{ block.settings.page_title_six }}</a></li>
                    {% endfor %}
                </ul>
            </div>
        </div>
    </div>
</div>
<div class="tab-content">
    <div class="page_one_main common_page tab active" id="tab1">
        {% for block in section.blocks %}
        <div class="top_banner_image" style="background-image:url({{ block.settings.header_image_one | img_url: 'master' }})">
            {% endfor %}
        </div>
        <div class="content">
            <div class="inner {{ settings.content_layout }}">
                <div id="rte">
                    {% for block in section.blocks %}
                    <h2>{{ block.settings.page_title_one }}</h2>
                    {% endfor %}
                    {{ pages[page_1].content }}
                </div>
            </div>
        </div>
    </div>
    <div class="page_two_main common_page tab" id="tab2" style="display:none;">
        {% for block in section.blocks %}
        <div class="top_banner_image" style="background-image:url({{ block.settings.header_image_two | img_url: 'master' }})">
            {% endfor %}
        </div>
        <div class="content">
            <div class="inner {{ settings.content_layout }}">
                <div id="rte">
                    {% for block in section.blocks %}
                    <h2>{{ block.settings.page_title_two }}</h2>
                    {% endfor %}
                    {{ pages[page_2].content }}
                </div>
            </div>
        </div>
    </div>
    <div class="page_three_main common_page tab" id="tab3">
        {% for block in section.blocks %}
        <div class="top_banner_image" style="background-image:url({{ block.settings.header_image_three | img_url: 'master' }})">
            {% endfor %}
        </div>
        <div class="third_section">
            <div class="content">
                <div class="inner {{ settings.content_layout }}">
                    <div id="rte">
                        {% for block in section.blocks %}
                        <h2>{{ block.settings.page_title_three }}</h2>
                        {% endfor %}
                        {{ pages[page_3].content }}
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="page_four_main common_page tab" id="tab4">
        {% for block in section.blocks %}
        <div class="top_banner_image" style="background-image:url({{ block.settings.header_image_four | img_url: 'master' }})">
            {% endfor %}
        </div>
        <div class="content">
            <div class="inner {{ settings.content_layout }}">
                <div id="rte">
                    {% for block in section.blocks %}
                    <h2>{{ block.settings.page_title_four }}</h2>
                    {% endfor %}
                    {{ pages[page_4].content }}
                </div>
            </div>
        </div>
    </div>
    <div class="page_five_main common_page tab" id="tab5">
        {% for block in section.blocks %}
        <div class="top_banner_image" style="background-image:url({{ block.settings.header_image_five | img_url: 'master' }})">
            {% endfor %}
        </div>
        <div class="content">
            <div class="inner {{ settings.content_layout }}">
                <div id="rte">
                    {% for block in section.blocks %}
                    <h2>{{ block.settings.page_title_five }}</h2>
                    {% endfor %}
                    {{ pages[page_5].content }}
                </div>
            </div>
        </div>
    </div>
    <div class="page_six_main common_page tab" id="tab6">
        {% for block in section.blocks %}
        <div class="top_banner_image" style="background-image:url({{ block.settings.header_image_six | img_url: 'master' }})">
            {% endfor %}
        </div>
        <div class="content">
            <div class="inner {{ settings.content_layout }}">
                <div id="rte">
                    {% for block in section.blocks %}
                    <h2>{{ block.settings.page_title_six }}</h2>
                    {% endfor %}
                    {{ pages[page_6].content }}
                </div>
            </div>
        </div>
    </div>
</div>
<script>
// $(window).scroll(function() {    
//     var scroll = $(window).scrollTop();
//     if (scroll >= 100) {
//         $(".main_inner_page").addClass("HeaderSticky");
//     } else {
//         $(".main_inner_page").removeClass("HeaderSticky");
//     }
// });  
function setTabActive(el) {
  el.show().addClass('active')
    .siblings().removeClass('active').hide();
  $("html, body").animate({
    scrollTop: 0
  }, "slow");
  e.preventDefault();
};



$(document).ready(function() {

      const hash = window.location.hash
      if (hash && hash.startsWith('#tab')) {
        setTabActive($(hash))
      }

    $('.tab-links a').on('click', event => setTabActive(event.target));

    $(".faq").accordion({
        questionClass: '.header',
        answerClass: '.content_faq',
        itemClass: '.faqitem'
    });

    $('.responsive').slick({
        centerMode: false,
        centerPadding: '60px',
        slidesToShow: 5,
        responsive: [{
                breakpoint: 768,
                settings: {
                    arrows: false,
                    centerMode: true,
                    centerPadding: '40px',
                    slidesToShow: 3
                }
            },
            {
                breakpoint: 480,
                settings: {
                    arrows: false,
                    centerMode: true,
                    centerPadding: '90px',
                    slidesToShow: 1,
                    swipe: true,
                    swipeToSlide: true
                }
            }
        ]
    });

    $(document).on('click', '.j-store-select', function(e) {
        e.preventDefault();
        $(this).find('ul').slideToggle();
    });

    $(document).on('click', '.j-store', function(e) {
        e.preventDefault();

        var store = $(this).html();

        $(this).toggleClass('selected');
        $('.j-store').not($(this)).removeClass('selected');
        $('.store-default').html(store).css('color', 'black');
        $('#competitor').val($(this).attr('data-value'));

    });
});
</script>
George Phillips
  • 33
  • 7
  • You need to check what URL hash the page was loaded with, and then set the corresponding tab as "active". You can only do this on the client side, because the fragment portion of the URL does not get sent to the server in the first place. – CBroe Jan 31 '22 at 10:51
  • Check out this thread: [https://stackoverflow.com/questions/5007530/how-do-i-scroll-to-an-element-using-javascript](https://stackoverflow.com/questions/5007530/how-do-i-scroll-to-an-element-using-javascript) – Soiloui Jan 31 '22 at 10:56

1 Answers1

2

The easiest approach would be to check the window.location.hash value on page load (I'd recommend right in your $(document).ready()) and do your tab-selection logic there.

Move your toggling logic into a separate function and call it from both the initial hash check and the on tab click event.

const hash = window.location.hash
if (hash && hash.startsWith('#tab')) {
  setTabActive(hash.substring(1))
}

$('.tab-links a').on('click', event => {
  setTabActive(event.target.id);
  event.preventDefault();
});

function setTabActive(tabId) {
  const el = $(tabId)
  el.show().addClass('active')
    .siblings().removeClass('active').hide();
  $("html, body").animate({
    scrollTop: 0
  }, "slow");
});

Also note, that you're missing the ID in your tab1 element. You could remove the default active from tab1 as well.

gru
  • 2,319
  • 6
  • 24
  • 39
  • Excellent - this looks like exactly what I need. So I'll move the function below out of the ready function: ```$(document).on('click', '.j-store-select', function(e) { e.preventDefault(); $(this).find('ul').slideToggle(); }); ``` – George Phillips Jan 31 '22 at 11:21
  • 1
    I would move the `setTabActive` function next (outside) the `onReady` function. – gru Jan 31 '22 at 11:30
  • Hi @gru, thanks for your help so far, appreciate it. Unfortunately this method doesn't quite work. I followed your recommendations, but the toggle function doesn't seem to work as expected. The ability to click through tabs stops working and nether does adding #tabX into the URL. in my head the toggle logic within the setTabActive function needs amendment, but I cant work it out! Any further assistance would be greatly appreciated! – George Phillips Feb 01 '22 at 09:45
  • Could you provide your complete latest version of the code? – gru Feb 01 '22 at 13:04
  • Have updated the code in main post! Thanks Gru! – George Phillips Feb 01 '22 at 15:06
  • I could not find any issues so far, do you see any errors in the browser console (dev tools)? – gru Feb 01 '22 at 20:08
  • Also, try adding a `console.log('in setTabActive')` as the first line to the method, so you can see if the function is called. – gru Feb 01 '22 at 20:09
  • Hm, can see i'm getting into the function using the console log. But get thrown a 'el.show()' is not a function when clicking links. And the same for 'preventdefault' when I use #tabX in the URL! Wondering if the variable being passed into the setTabActive function is correct? – George Phillips Feb 03 '22 at 09:31
  • @GeorgePhillips sorry there was indeed an issue with my solution, could you please check it again? – gru Feb 07 '22 at 14:32