We Keep Coding

How to change content when click Sidebar

I have sidebar in this code :
<nav id="sidebar">
<ul class="list-unstyled components">
<li >
Home
</li>
<li>
Page1
</li>
</ul>
</nav>
Now I want to change the only content when user click sidebar button (Home or Page1)
and I already have a body for those 2 content (Home and Page1)

Try using this code. I wrote the explanation in the comments
//container is the selected element into which the content is to be loaded
var container = document.querySelector('#content'),
//these are the selectors for your links
linkHome = document.querySelector('#link__home'),
linkPage1 = document.querySelector('#link__page1');
//function that loads content
function loadContent(content) {
// AJAX request
var xhr = new XMLHttpRequest();
xhr.open('POST', content, true);
xhr.onload = function() {
var el = document.createElement('div');
el.innerHTML = this.response;
container.empty()
container.prepend(el);
}
xhr.send();
}
//After clicking the selector it will start the function loading the content. Enter the URL to your files in the appropriate place
linkHome.addEventListener('click', function(e){
loadContent('/URL/TO/home.html');
e.preventDefault() ;
});
linkPage1.addEventListener('click', function(e){
loadContent('/URL/TO/page1.html');
e.preventDefault() ;
});
<nav id="sidebar">
<ul class="list-unstyled components">
<li>
<!-- Add to your links ID attribure -->
<a id="link__home" href="#">Home</a>
</li>
<li>
<!-- Add to your links ID attribure -->
<a id="link__page1" href="#">Page1</a>
</li>
</ul>
</nav>
<div id="content"></div>

Bootstrap 4 - Link to specific tab

I have a Bootstrap 4 tabs set in a Wordpress website and want to link to a specific tab from another page link:
Index.php:
Discover More
Services.php:
<!-- Nav tabs -->
<ul class="nav nav-tabs text-xs-center" role="tablist">
<li class="nav-item">
<a class="nav-link active" data-toggle="tab" href="#innovation" role="tab" aria-expanded="true">
<h4>Innovation &<br/>Investigation</h4>
</a>
</li>
<li class="nav-item">
<a class="nav-link" data-toggle="tab" href="#electronic-engineering" role="tab" aria-expanded="false">
<h4>Electronic<br/>Engineering</h4>
</a>
</li>
<li class="nav-item">
<a class="nav-link manufacturing" data-toggle="tab" href="#manufacturing" role="tab" aria-expanded="false">
<h4>Manufacturing</h4>
</a>
</li>
</ul>
<!-- Tab panes -->
<div class="tab-content clearfix">
<!-- Innovation -->
<div class="tab-pane active" id="innovation" role="tabpanel" aria-expanded="true">
<div data-aos="fade" data-aos-duration="2000" class="col-sm-5">
Content
</div>
</div>
<!-- Electronic Engineering -->
<div data-aos="fade" data-aos-duration="2000" class="tab-pane" id="electronic-engineering" role="tabpanel" aria-expanded="false">
<div class="col-sm-5">
Content
</div>
</div>
<!-- Manufacturing -->
<div data-aos="fade" data-aos-duration="2000" class="tab-pane" id="manufacturing" role="tabpanel" aria-expanded="false">
<div class="col-sm-5">
Content
</div>
</div>
</div>
Javascript:
// Javascript to enable link to tab
var url = document.location.toString();
if (url.match('#')) {
$('.nav-tabs a[href="#' + url.split('#')[1] + '-tab"]').tab('show');
} //add a suffix
// Change hash for page-reload
$('.nav-tabs a').on('shown.bs.tab', function (e) {
window.location.hash = e.target.hash;
})
I had tried this solutions but without success:
- Twitter Bootstrap Tabs: Go to Specific Tab on Page Reload or Hyperlink
Thanks

I would recommend something like this / use pushState - otherwise your browser scrolls to your ID:
$(function() {
$('a[data-toggle="tab"]').on('shown.bs.tab', function (e) {
history.pushState({}, '', e.target.hash);
});
var hash = document.location.hash;
var prefix = "tab_";
if (hash) {
$('.nav-tabs a[href="'+hash.replace(prefix,"")+'"]').tab('show');
}
});

It's not working because you need to attach the shown.bs.tab handler before calling .tab('show') on page load.
// wire up shown event
$('a[data-toggle="tab"]').on('shown.bs.tab', function (e) {
console.log("tab shown...");
});
// read hash from page load and change tab
var hash = document.location.hash;
var prefix = "tab_";
if (hash) {
$('.nav-tabs a[href="'+hash.replace(prefix,"")+'"]').tab('show');
}
Bootstrap 4 - Active Tab on Page Load
Code: http://www.codeply.com/go/Yu8wbjeGMZ
Demo: http://www.codeply.com/render/Yu8wbjeGMZ#tab2

This is where I landed with Bootstrap 4. You just need to make sure your hash it the id of the anchor (a href) tag.
$(function() {
$(document.location.hash).tab('show');
});

Create a menu file with dynamic tabs

I am trying to make my website's menu in one file only and just include it in the rest of the .html pages. I am copy and pasting the menu each time I make a new page because I want the tab that is active to be highlighted for each different page. This is the reason why I can't make one file only for every page, and I have no idea how can I make it work to set the tab active in each different page.
This is the code I am copy-pasting in each page.
<!-- BEGIN MENU -->
<section id="menu-area">
<nav class="navbar navbar-default" role="navigation">
<div class="container">
<div id="navbar" class="navbar-collapse collapse">
<ul id="top-menu" class="nav navbar-nav navbar-right main-nav">
<li>Home</li>
<li>Downloads</li>
<li>Media</li>
<li class="dropdown"><a href="#" class="dropdown-toggle"
data-toggle="dropdown">Research <span
class="fa fa-angle-down"></span></a>
<ul class="dropdown-menu" role="menu">
<li>D3</li>
</ul></li>
<li>Team</li>
<li class="active">Contact</li>
</ul>
</div>
<!--/.nav-collapse -->
<a href="#" id="search-icon"> <i class="fa fa-search"> </i>
</a>
</div>
</nav>
</section>
<!-- END MENU -->
In this case the contact tab is highlighted:
<li class="active">Contact</li>
If the case is that the home page is active, then I would need to do this:
<li class="active">Home</li>
I hope I made myself clear, my English is terrible. I appreciate any idea, I am really new at web development.

One thing you can do is to read the URL and on base of that you add the active class to that link in your menu.
$(function() {
var pgurl = window.location.href.substr(window.location.href
.lastIndexOf("/")+1);
$("#nav ul li a").each(function(){
if($(this).attr("href") == pgurl || $(this).attr("href") == '' )
$(this).addClass("active");
})
});

Using D3
<script>
var pgUrl = window.location.href.substr(window.location.href.lastIndexOf('/') + 1);
d3.select("#navbar").selectAll("a").each(function(d){
if(d.tecode here == pgUrl )
d.attr("class","active");
});
</script>

I think this way more useful:
$(function(){
var pgUrl = window.location.href.substr(window.location.href.lastIndexOf('/') + 1);
$("#nav ul li a[href='"+ pgUrl +"']").addClass('active');
});

How to set the class="active" to two separate links based on scrolling

Trying to find a way to set a link as active for a navbar when a certain area of the webpage is scrolled to in a one page site.
I have this working for my main menu that is seen by larger resolution displays, however I also have a secondary menu for mobile devices and despite all attempts it seems to never work. I have tried setting both or just setting the mobile by itself to no avail. Any help is appreciated below is a copy of my navbar code along with the java script to set active that I've used.
<!-- Start Header Section -->
<div class="hidden-header"></div>
<header class="clearfix">
<!-- Start Top Bar -->
<div class="top-bar">
<div class="container">
<div class="row">
<div class="col-md-6">
<!-- Start Contact Info -->
<ul class="contact-details">
<li><i class="fa fa-phone"></i> +1 (000) 000 0000</li>
<li><i class="fa fa-envelope-o"></i> email#domain.com</li>
</ul>
<!-- End Contact Info -->
</div>
<!-- .col-md-6 -->
<div class="col-md-6">
<!-- Start Social Links -->
<ul class="social-list">
<li><a class="facebook itl-tooltip" data-placement="bottom" title="Facebook" href="#"><i class="fa fa-facebook"></i></a></li>
<li><a class="twitter itl-tooltip" data-placement="bottom" title="Twitter" href="#"><i class="fa fa-twitter"></i></a></li>
<li><a class="google itl-tooltip" data-placement="bottom" title="Google Plus" href="#"><i class="fa fa-google-plus"></i></a></li>
</ul>
<!-- End Social Links -->
</div>
<!-- .col-md-6 -->
</div>
<!-- .row -->
</div>
<!-- .container -->
</div>
<!-- .top-bar -->
<!-- End Top Bar -->
<!-- Start Logo & Naviagtion -->
<div class="navbar navbar-default navbar-top">
<div class="container">
<div class="navbar-header">
<!-- Stat Toggle Nav Link For Mobiles -->
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
<i class="fa fa-bars"></i>
</button>
<!-- End Toggle Nav Link For Mobiles -->
<a class="navbar-brand" href="index.html">
<img alt="AltTxt" src="images/logo.svg">
</a>
</div>
<div id="menu-center" class="navbar-collapse collapse">
<!-- Start Navigation List -->
<ul class="nav navbar-nav navbar-right">
<li>Home</li>
<li>Services</li>
<li>About</li>
<li>Contact</li>
</ul>
<!-- End Navigation List -->
</div>
</div>
<!-- Mobile Menu Start -->
<ul class="wpb-mobile-menu">
<li>Home</li>
<li>Services</li>
<li>About</li>
<li>Contact</li>
</ul>
<!-- Mobile Menu End -->
</div>
<!-- End Header Logo & Naviagtion -->
</header>
<!-- End Header Section -->
And here is the javascript I've been using to modify the primary menu:
$(document).ready(function () {
$(document).on("scroll", onScroll);
$('a[href^="#"]').on('click', function (e) {
e.preventDefault();
$(document).off("scroll");
$('a').each(function () {
$(this).removeClass('active');
})
$(this).addClass('active');
var target = this.hash;
$target = $(target);
$('html, body').stop().animate({
'scrollTop': $target.offset().top+2
}, 500, 'swing', function () {
window.location.hash = target;
$(document).on("scroll", onScroll);
});
});
});
function onScroll(event){
var scrollPosition = $(document).scrollTop();
$('#menu-center a').each(function () {
var currentLink = $(this);
var refElement = $(currentLink.attr("href"));
if (refElement.position().top <= scrollPosition && refElement.position().top + refElement.height() > scrollPosition) {
$('#menu-center ul li a').removeClass("active");
currentLink.addClass("active");
}
else{
currentLink.removeClass("active");
}
});
}
Edit: Here's the new code I'm working with which is working for both menu's but not all sections.
var navItems = jQuery('.menu-item a');
var win = jQuery(window);
var items = jQuery('.item');
navItems.click(function(e){
var item = jQuery(this);
jQuery('.menu-item a.active').removeClass('active');
item.addClass('active');
});
win.scroll(function(e){
jQuery.each(items, function(key, value){
var item = jQuery(value);
console.log(win.scrollTop(), item.offset().top);
if(win.scrollTop() >= item.offset().top){
jQuery('.menu-item a.active').removeClass('active');
var id = item.attr('id');
jQuery.each(navItems, function(key, value){
var navItem = jQuery(value);
if(navItem.attr('href') == '#'+id) navItem.addClass('active');
});
}
});
});

Ok found the error that was causing the new code to not entirely work. Go figure use another persons code and accidentally had a repeat class. For anyone else trying to do this the following works for me:
var navItems = jQuery('.nav-item a');
var win = jQuery(window);
var items = jQuery('.segment');
navItems.click(function(e){
var segment = jQuery(this);
jQuery('.nav-item a.active').removeClass('active');
segment.addClass('active');
});
win.scroll(function(e){
jQuery.each(items, function(key, value){
var segment = jQuery(value);
console.log(win.scrollTop(), segment.offset().top);
if(win.scrollTop() >= segment.offset().top){
jQuery('.nav-item a.active').removeClass('active');
var id = segment.attr('id');
jQuery.each(navItems, function(key, value){
var navItem = jQuery(value);
if(navItem.attr('href') == '#'+id) navItem.addClass('active');
});
}
});
});
Make sure to set any menu item's <li> to class="nav-item" and set any <section> to class="segment"

Bootstrap - Toggle navigation and accordion panel simultaneously

I'd like to have a menu button that opens a custom slide-in nav and a specific bootstrap accordion panel (within the nav) simultaneously on one click. I have the slide-in menu and accordion working independently. The button currently opens the menu but can't figure out how to have it also expand a panel. Ideally I'd like the panel to open after the menu opens with a slight delay.
Please check this working JSFIDDLE for details
Thanks!
jQuery(document).ready(function($) {
var open = false;
var openSidebar = function() {
$('.menu--slide-right').addClass('is-active');
$('.toggle-menu').addClass('is-active');
$('#toggle-menu').addClass('toggle-close');
open = true;
}
var closeSidebar = function() {
$('.menu--slide-right').removeClass('is-active');
$('.toggle-menu').removeClass('is-active');
$('#toggle-menu').removeClass('toggle-close');
open = false;
}
$('.toggle-menu').click(function(event) {
event.stopPropagation();
var toggle = open ? closeSidebar : openSidebar;
toggle();
});
$(document).click(function(event) {
if (!$(event.target).closest('.menu--slide-right').length) {
closeSidebar();
}
});
});
<header class="navbar nav-main navbar-fixed-top" role="banner">
<ul class="nav nav--right">
<li class="v-button--slide-right" id="toggle-menu">
<button class="mpp-menu-icon mpp-menu-icon--cross toggle-menu">
<span class="toggle"></span>
<span class="menu">menu</span>
</button>
</li>
</ul>
<nav id="menu--slide-right" class="nav menu--slide-right">
<ul class="main-menu">
<li>Home</li>
<ul aria-multiselectable="true" role="tablist" id="accordion" class="panel-group">
<li class="panel">
<a aria-controls="dropdown-menu--resources" aria-expanded="false" data-target="#dropdown-menu--resources" data-parent="#accordion" data-toggle="collapse">Resources <span class="expand-icon fa fa-angle-down"></span></a>
<div aria-labelledby="headingOne" role="tabpanel" class="panel-collapse collapse" id="dropdown-menu--resources">
<ul class="v-dropdown-menu">
<li><span class="link-icon fa fa-angle-right"></span> Blog</li>
<li><span class="link-icon fa fa-angle-right"></span> FAQ</li>
<li><span class="link-icon fa fa-angle-right"></span> Glossary</li>
<li><span class="link-icon fa fa-angle-right"></span> Shipping info</li>
</ul>
</div>
</li>
</ul>
<!-- end panel-group -->
<li>Capabilities</li>
<li>Contact</li>
</ul>
</nav>
</header>

use the in and collapse classes
var openSidebar = function(){
...
$('#dropdown-menu--resources').addClass('in');
open = true;
}
var closeSidebar = function(){
...
$('#dropdown-menu--resources').removeClass('collapse');
open = false;
}

Try this
Added $(".collapse").collapse('show'); in openSidebar and $(".collapse").collapse('hide'); in closeSidebar.
var openSidebar = function(){
$('.menu--slide-right').addClass('is-active');
$('.toggle-menu').addClass('is-active');
$('#toggle-menu').addClass('toggle-close');
$(".collapse").collapse('show');
open = true;
}
var closeSidebar = function(){
$('.menu--slide-right').removeClass('is-active');
$('.toggle-menu').removeClass('is-active');
$('#toggle-menu').removeClass('toggle-close');
$(".collapse").collapse('hide');
open = false;
}