how to display jquery tab id in url and active same tab? - php

Question

I want to add tab id to the URL and also want to activate the current tab which tab id in the URL.
If I hit the URL with tab id from another system then the same tab will be active.
I have the added my code:
<div id="faq-accordion">
<ul class="tabs">
<li class="tab-link current" data-tab="tab-1"><a href="#tab-2">About us</li>
<li class="tab-link" data-tab="tab-2"><a href="#tab-2">Ordering</li>
<li class="tab-link" data-tab="tab-3"><a href="#tab-2">Payment</li>
</ul>
<div id="tab-1" class="tab-content current">
<div class="accordion-block close">
<div class="accordion-trigger close">
<span>Can order be placed on phone?</span>
</div>
<div class="accordion-content">
<ul>
<li>Yes, we do take orders on the phone</li>
<li>We also take orders via Whatsapp. </li>
</ul>
</div>
</div>
</div>
<div id="tab-2" class="tab-content">
<div class="accordion-block close">
<div class="accordion-trigger close">
<span>Only Part of my order has arrived. Why?</span>
</div>
<div class="accordion-content">
<p>In rare occasions, few of the ordered products are unavailable. In such situations, we try to deliver the orders in parts. In such situations, you will be duly informed by our customer service executive.</p>
</div>
</div>
</div>
</div>
<script>
jQuery(document).ready(function(){
jQuery('ul.tabs li').click(function(){
var tab_id = jQuery(this).attr('data-tab');
jQuery('ul.tabs li').removeClass('current');
jQuery('.tab-content').removeClass('current');
jQuery(this).addClass('current');
jQuery("#"+tab_id).addClass('current');
});
});
</script>

Answer 1

it's so simple, you can handle it yourself with pushstate (to update your URL) or you can use this library which made it piece of a cake already :)