I’m trying to create a URL link that opens a particular page at a particular element (a form).
But the element is inside a bootstrap tab on that page.
To get the correct tab to open I’ve followed this javascript Twitter Bootstrap Tabs: Go to Specific Tab on Page Reload or Hyperlink
As I now have a # hashtag for the tab in the URL I can’t seem to find how to add second hashtag or element reference.
Any thoughts on how I can open the page to the form inside the second tab?
My tabs:
<div class="col-md-12">
<ul class=" nav-tabs nav">
<li id="tab-1" class="active nav-tab nil-tick ">
<a href="#stays" data-toggle="tab" aria-expanded="false">List<span class="pronoun"> a</span> Stay </a>
</li>
<li id="tab-2" class="nil-tick">
<a href="#experiences" data-toggle="tab" aria-expanded="false">List<span class="pronoun"> an</span> Experience </a>
</li>
<li id="tab-3" class="nil-tick">
<a href="#other" style="color:unset" data-toggle="tab" aria-expanded="false"> Other </a>
</li>
</ul>
</div>
And the section I wish to link to
<form class="subscribe_form" method="POST" style="background:white" id="experience-application-form" autocomplete="off">
And the javascript
// Javascript to enable link to tab
var hash = document.location.hash;
var prefix = "tab-";
if (hash) {
$('.nav-tabs a[href="' + hash.replace(prefix, "") + '"]').tab('show');
}
// Change hash for page-reload
$('.nav-tabs a').on('shown.bs.tab', function (e) {
window.location.hash = e.target.hash.replace("#", "#" + prefix);
});