We Keep Coding

Linking to a specific HTML tab of another page within the website

In my home page there are 7 links. code of one link is given below.
<a id="mosquito-btn" href="~/general-pest-control.cshtml#nav-mosquito" class="btn btn-p btn-arrow">Read More</a>
On another page I have 7 tabs for each of the 7 links in the home page. when home page links are clicked I want to be redirected to the other page and open the specific tab.
<nav>
<div class="nav nav-tabs tabs-pest" id="nav-tab" role="tablist">
<a name="top"></a>
<a class="tab-pest active" id="nav-mosquito-tab" data-toggle="tab" href="#nav-mosquito" role="tab" aria-controls="nav-mosquito" aria-selected="true"><img src="~/Images/tab-mosquito.png" /><span>Mosquito</span></a>
</div>
</nav>
<div class="tab-content py-3 px-3 px-sm-0" id="nav-tabContent">
<div class="tab-pane fade show active" id="nav-mosquito" role="tabpanel" aria-labelledby="nav-mosquito-tab">
<div class="row">
<p>text></p>
</div>
</div>
</div>
At the moment only the first tab is opened on click of home page link. How do I open tabs ?
Do I need jquery?
I tried with this one.
But it didn't work
var tabName = (window.location.href.match(/[?&]tab-name=[^&$]+/i) || '=').split('=')[1];
if (tabName.length)
$('#nav-tabContent .tab-pest[href="~/general-pest-control.cshtml' + tabName + '"]').tab('show');

Try with localStorage:
Save id of clicked link in localstorage:
<a id="nav-mosquito-tab">
$("body").on("click","a",function(){
localStorage.setItem("clickedTab",$(this).attr("id"));
});
Give the same id as before in page that contains tabs. And do click on the tab using .click()
<a class="tab-pest active" id="nav-mosquito-tab" data-toggle="tab" href="#nav-mosquito" role="tab" aria-controls="nav-mosquito" aria-selected="true"><img src="~/Images/tab-mosquito.png" /><span>Mosquito</span></a>
$(document).ready(function(){
var tab = localStorage.getItem("clickedTab");
$("#"+tab).click();
});

All you have to do is add an attribute target="_blank" in the anchor tag as shown below:
I will open this link in new tab
I dont know why it isn't executable here. But here is a JSFiddle link for the same.
Here is a reference link for the same.

How can I close the sidebar menu? (Bootstrap)

I have a side-menu on my bootstrap webpage which is open by default.
If the screen is too small there is a button placed behind it to open the menu again.
When a user clicks on a link I would like the menu to close automatically.
The button I already have opens the menu perfectly, but I have no way of closing it?
<div id="wrapper">
<div id="sidebar-wrapper">
<ul class="sidebar-nav">
<li class="sidebar-brand"><img src="/content/img/AAA.png" width="27px" />Menu</li>
<li data-ng-hide="!authentication.isAuth">Welcome {{authentication.userName}}</li>
<li data-ng-hide="!authentication.isAuth">Page1</li>
<li data-ng-hide="!authentication.isAuth">Logout</li>
<li data-ng-hide="authentication.isAuth"><span class="glyphicon glyphicon-user"></span> Login</li>
<li data-ng-hide="authentication.isAuth"><span class="glyphicon glyphicon-log-in"></span> Sign Up</li>
</ul>
</div>
</div>
<a href="#menu-toggle" class="btn btn-default" id="menu-toggle">
Menu
</a>
<script>
$("#menu-toggle").click(function (e) {
e.preventDefault();
$("#wrapper").toggleClass("toggled");
});
</script>

You could add in another event handler for the a elements.
$(".sidebar-nav li a").click(function() {
$("#wrapper").removeClass("toggled");
});

Here are a few things that you could do:
You could use hide/show with jQuery(I can see you are already using it).
Instead of makeing a "toggled" class, Bootstrap has a built in "hidden" class that you could use.
You could also toggle it's css "display" value.
You could use the "animate" class to slide the menu on and off the screen.
You could have a variable to store the state of the menu("true" for out, "false" for in), and change it when the toggle button is clicked.
I had a similar issue, and I placed a close button on the menu, and added a seperate click handler that would close the menu. The close button would then hide with the menu, leaving just the button to open the menu again.

How do I load Bootstrap tab content only when it is active?

I am using Bootstrap tabs to load a widget from a server. What I need is to load the tab content as soon as the user click the tab instead of the initial load of the page. For ex below is the HTML for the page:-
<ul class="nav nav-tabs" role="tablist">
<li class="active">FX</li>
<li>US Bond Futures</li>
<li>US Short Term IR futures</li>
<li>Global Equity Indices</li>
<li>Commodities</li>
<li>Volatility</li>
</ul>
<!-- Tab Content -->
<div class="tab-content">
<!-- FX TAB content -->
<div class="active tab-pane fade in" id="tabs-first">
</div>
</div>
The first tab is referencing to the #tabs-first id and second tab to the #tabs-second. I want to load #tabs-second only when user clicks on that tab not during the initial load of the page.

What kind of content you want to fetch? Use .load(), as you want to target for #tabs-second only, register click handler to that element like so:
$('[href="#tabs-second"]').click(function(){
$('#tabs-second').load('remoteUrl');
// or use callback/complete
$('#tabs-second').load('remoteUrl', function () {
// do something here
});
});

Bootstrap toggleable tabs without having tab links

Is there a way to do the following
<!-- Nav tabs -->
<ul class="nav nav-tabs" role="tablist">
<li class="active">Home</li>
<li>Profile</li>
<li>Messages</li>
<li>Settings</li>
</ul>
<!-- Tab panes -->
<div class="tab-content">
<div class="tab-pane active" id="home">...</div>
<div class="tab-pane" id="profile">...</div>
<div class="tab-pane" id="messages">...</div>
<div class="tab-pane" id="settings">...</div>
<div class="tab-pane" id='extra'> .... </div>
</div>
so there is another tab pane called #extra, but I don't want it to have a link as a tab, but I do want it to be toggleable by some other event
as bootstrap tabs.js works from trigger a tab('show') on a link and not on the pane itself, how do I trigger a tab pane without working on a tab?
note: I aware that the basic operation it does it doing a show() and hide() on the tab pane, but I feel that doing all this manually inhibits me from using callbacks, etc

You could add the tab for extras and then just hide it
Add this to your nav-tabs:
<li class="hidden"><a href="#extra" role="tab" data-toggle="tab" >Extra</a></li>
Then activate from somewhere else with JavaScript:
$("#launchExtra").click(function() {
$('#myTab a[href="#extra"]').tab('show')
});
Working demo in jsFiddle
Alternatively, you could just handle the whole thing yourself. The only thing .tab('show') does is remove the active class from all the other nav-tabs and tab-content elements. And then add back the .active class on the appropriate elements.
So first remove all the active elements and then add back the active class:
$("#launchExtra").click(function() {
$(".nav-tabs .active, .tab-content .active").removeClass("active");
$("#extra").addClass("active");
});
Working demo in jsFiddle

Create a link in memory and call the tab function on it.
$('<a data-toggle="tab" data-target="#some-id"></a>').tab("show")

an anchor link is used when you want to navigate. If you dont want to navigate, use a button. But style it like a link.
<ul class="nav nav-tabs">
<li role="presentation" class="active">
<button class="btn btn-sm btn-link">Tab1</button>
</li>
</ul>
nows its a button and will not navigate. Just add any javascript you want to it.
But I recommend to use the anchor. Javascript tabs dont support history back in the browser. And its often tricky to start with ex. tab number 4 selected. I often let every tabpage be an own page. With its own route

simplemodal does not appear after loading dynamic data into a page

I am using simpelmodal to create dialog in jquery, but now the issue is in one of my html page i am adding
li elements dynamically , and when on a click of a button i try to fire $("attachment-modal-content").modal() dialog box doesnt appear until i again tap over a screen or move the screen. as soon as i move the screen it appears.
notable things is that if i dont load any li elements in the page , it popups normally.
here is the example page , initially attachment-modal-content is set to display:none
<div>
<a href="#" id="openDialog" />
<ul id="mylist">
</ul>
<div id="attachment-modal-content">
<h3>Attachment</h3>
<ul class="attachment">
<li id="imageBtn" class="green"><em><i class="fa fa-camera"></i></em><span>Image</span></li>
<li id="audioBtn" class="red"><em><i class="fa fa-volume-up"></i></em><span>Audio</span></li>
<li id="videoBtn" class="yellow"><em><i class="fa fa-video-camera"></i></em><span>Video</span></li>
<li id="linkBtn" class="blue"><em><i class="fa fa-link"></i></em><span>Link</span></li>
</ul>
<ul class="attachList">
</ul>
</div>
</div>
</div>
button code
$("#openDialog").on('click',function(){
$("#attachment-modal-content").modal();
});
once i load the date using $('#mylist').append('<li><li>') , dialog wont appear on a first button click , it appears
when i move the screen.