Develop Reference

Trying to create a menu toggle

I am trying to create a menu toggle like on mobile for the desktop also with hide and show functionality but I am not able to do so.
$(document).ready(function() {
$("#menuMobileToggle").click(function() {
$(".CategoryList").slideToggle(700);
});
});
<div id="top-nav">
<div class="CategoryList" id="TopCategoryList">
<div class="SideCategoryListClassic">
<nav>
<ul class="category-list" style="padding-top: 3px;">
<li class="">MOTO-D Tire Warmers</li>
<li class="">MOTO-D Stands</li>
<li class="">Bonamici Rearsets</li>
<li class="">MOTO-D "Next" GPS Lap Timer</li>
<li class="">MOTO-D Undersuit</li>
<li class="">Spark Italy Exhausts</li>
<li class="">Accessories</li>
</ul>
</nav>
</div>
</div>
<div class="clear"></div>
<a href="#" id="menuMobileToggle">

Seems like your code is incomplete and you must include jquery library. check below snippet.
$(document).ready(function() {
$("#menuMobileToggle").click(function() {
$(".CategoryList").slideToggle(700);
});
});
.CategoryList {
display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="top-nav">
Menu
<div class="clear"></div>
<div class="CategoryList" id="TopCategoryList">
<div class="SideCategoryListClassic">
<nav>
<ul class="category-list" style="padding-top: 3px;">
<li class="">MOTO-D Tire Warmers</li>
<li class="">MOTO-D Stands</li>
<li class="">Bonamici Rearsets</li>
<li class="">MOTO-D "Next" GPS Lap Timer</li>
<li class="">MOTO-D Undersuit</li>
<li class="">Spark Italy Exhausts</li>
<li class="">Accessories</li>
</ul>
</nav>
</div>
</div>
</div>

Deep link animsition

I have integrated "animsition.js" to my website, it work fine but some link don't work in "fade out" effect. I post my code:
<nav>
<div class="cbp-spmenu cbp-spmenu-vertical cbp-spmenu-right text-left" id="side-menu">
<!-- LOGO -->
<a class="animsition-link" href="../../index.html"><img src="../../assets/images/logo/logo_white2.png" alt="logo"></a>
<i class="icon ion-ios-close-empty icon-close menu-close-btn text-white"></i>
<div class="top">
<div class="tr">LANGUAGE_</div>
<div><a class="animsition-link" href="#"><span class="uns lang">ITALIANO</span></a> <br>
<a class="animsition-link" href="#"><span class="current lang">ENGLISH</span></a></div>
</div>
<ul class="nav navbar-nav container animsition">
<div class="tr">MENU_</div>
<li><a class="animsition-link" href="../../index.html">HOME</a></li>
<li class="dropdown">
<a class="expander" href="#">
<span class="current">PROJECTS LIST</span></a>
<div class="content">
<ul role="menu">
<li>
<a href="#">
<span class="rec4">CapozziPaints</span>
</a>
</li>
</ul>
</div>
</li>
<li>ABOUT</li>
<li>COOKIE POLICY</li>
<ul class="nav navbar-nav">
<div class="tr">CONTACT ME_</div>
<li><span class="rec3">info#josedesign.it</span></li>
<li><span class="text-white">+39 389.582.3119</span></li>
</ul>
</ul>
<!-- End navbar-nav -->
<p class="copyright grey">2017 JoseDesign.it<br>Proudly designed by Jose.</p>
</div>
</nav>
After my tag, I have inserted " ", but some link like "Home", don't make the fade out effect.
The other question is I have to insert a "fadeIn" effect to the "img" tag that I have in this code:
$(window).scroll(function() {
$.each($('img'), function() {
if ( $(this).attr('data-src') && $(this).offset().top < ($(window).scrollTop() + $(window).height() + 100) ) {
var source = $(this).data('src');
$(this).attr('src', source);
$(this).removeAttr('data-src');
}
})
})
I try several way, the scrolling effect + show image work fine, but the fadeIn effect don't work.
Could someone help me? Thanks.

solved....
Simply I have change the animsition.js ver. 4.0.2 with vers. 3.4.3....done!
Everything work fine, all the link work fine.
The jquery script (for fadeIn image effect) doesn't work yet...

Bootstrap dropdown-menu won't open inside div class=container

I use quiet complex multi-level navigation and I need to wrap content of the dropdown in the bootstrap container, so it's max height fit's the grid height. However, when I do so, dropdown doesn't open at all.
See the fiddle (I put the comment right after the issue causing div, so if you comment that div, the dropdown will open normally): https://jsfiddle.net/s5ug07t4/7/
Here's the HTML with the container:
<ul class="nav navbar-nav">
<li class="dropdown">
Main menu item
<div class="container"><!-- That's the issue causing container -->
<ul class="dropdown-menu row">
<li class="col-sm-3 col-xs-6">
<ul>
<li class="dropdown-header">abc</li>
<li class="dropdown-header">def</li>
<li class="dropdown-header">ghi</li>
</ul>
</li>
<li class="col-sm-3 col-xs-6">
<ul>
<li class="dropdown-header">abc</li>
<li class="dropdown-header">def</li>
<li class="dropdown-header">ghi</li>
</ul>
</li>
<li class="col-sm-3 col-xs-6">
<ul>
<li class="dropdown-header">abc</li>
<li class="dropdown-header">def</li>
<li class="dropdown-header">ghi</li>
</ul>
</li>
<li class="col-sm-3 col-xs-6">
<ul>
<li class="dropdown-header">abc</li>
<li class="dropdown-header">def</li>
<li class="dropdown-header">ghi</li>
</ul>
</li>
</ul>
</div><!-- /That's the issue causing container -->
</li>
</ul>
Here's my updated fiddle, so you see exactly what I need: https://jsfiddle.net/s5ug07t4/9 Currently it's not a valid HTML because there is div container inside ul, however, moving it one level up wrapping ul with that container breaks dropdown so it doesn't open anymore.

Bootstrap 2.1 javascript nested tabs: inner tab closes outer tab

I thought I ask SO for help before I file a bugreport. I have a twitter bootstrap tab inside another tab, and wenn I click to change to the next inner tab, bootstrap.js does not only remove the .active from the closest .tab-pane, but also from the outer .tab-pane. I tried to dive into the code, but my javascript isn't good enough to fully understand it. I tried to manually add the active class to the outer .tab-pane with jquery and also tried .tab('show') on the data-toggle="tab" element. It seems like that bootstrap.js finds all .tab-content and then removes the .active from its children. Or maybe I have a mistake in my markup (well from experience 99% of the time it's human error). The javascript is all boilerplate, I just call the first tab with tab('show'). Here's my markup:
<ul id="sidebar" class="unstyled naviTab">
<li class="accordion-group">...</li>
<li class="accordion-group active">
<h2 id="module1-title1" class="module-header" href="#getting-started" data-toggle="tab" data-original-title="">...</h2>
</li>
</ul>
...
...
<ul class="unstyled tab-content">
<li id="course" class="tab-pane">
<li id="getting-started" class="tab-pane active">
<div class="wizard stepTab">
<a class="active" href="#module1-step1" data-toggle="tab">1.Step</a>
<a class="" href="#module1-step2" data-toggle="tab">2.Step</a>
<a class="" href="#module1-step3" data-toggle="tab">3.Step</a>
</div>
<ul class="links unstyled tab-content">
<li id="module1-step1" class="tab-pane active" data-original-title="">...</li>
<li id="module1-step2" class="tab-pane">
<li id="module1-step3" class="tab-pane">
</ul>
</li>
</ul>
And after clicking a href="#module1-step2":
<ul id="sidebar" class="unstyled naviTab">
<li class="accordion-group">...</li>
<li class="accordion-group active">
<h2 id="module1-title1" class="module-header" href="#getting-started" data-toggle="tab" data-original-title="">...</h2>
</li>
</ul>
...
...
<ul class="unstyled tab-content">
<li id="course" class="tab-pane">
<li id="getting-started" class="tab-pane">
<div class="wizard stepTab">
<a class="" href="#module1-step1" data-toggle="tab">1.Step</a>
<a class="active" href="#module1-step2" data-toggle="tab">2.Step</a>
<a class="" href="#module1-step3" data-toggle="tab">3.Step</a>
</div>
<ul class="links unstyled tab-content">
<li id="module1-step1" class="tab-pane" data-original-title="">...</li>
<li id="module1-step2" class="tab-pane active">
<li id="module1-step3" class="tab-pane">
</ul>
</li>
</ul>
Notice how the outer tab-panes are all inactive.
If anybody has run into this problem or can tell me where I messed up I'd be very grateful!
EDIT1
Here's my javascript. I actual don't have to include any js because bootstrap.js works just fine just with the html attributes(and that's probably the reason why it breaks). I tried different approaches (.each(), e.preventDefault()) but nothing seemed to work. But here's my js anyway:
<script>
/*global $*/
"use strict";
$(function () {
$('.naviTab li:first-child h1').tab('show'); //shows the first child of the outer tab on load. Could just add an .active to the markup instead
$('#sidebar li:first-child').addClass('active'); //this is for the accordion that the outer tab links are enbedded in
$('.stepTab a').click(function () {
if ($(this).closest('li').hasClass('active') == false) { //this is supposed to check if the outer tab has .active and add it if it doesn't. Unfortunately it doesn't work...
$(this).closest('li').addClass('active');
}
$(this).siblings().removeClass('active'); //this is for css styling purposes on the inner tab a's
$(this).addClass('active');
});
});
</script>
Cheers for any suggestions!

As stated by albertedevigo you only need to provide a unique ID's to each tab, no matter if the tab is nested, this is because the javascript action will open/close this specific tab:
<div class="tabbable">
<ul class="nav nav-tabs">
<li class="active">Section 1</li>
<li>Section 2</li>
</ul>
<div class="tab-content">
<div class="tab-pane active" id="tab1">
<p>I'm in Section 1.</p>
</div>
<div class="tab-pane" id="tab2">
<p>Howdy, I'm in Section 2.</p>
<div class="tabbable">
<ul class="nav nav-tabs">
<li class="active">Section 3</li>
<li>Section 4</li>
</ul>
<div class="tab-content">
<div class="tab-pane active" id="tab3">
<p>I'm in Section 3.</p>
</div>
<div class="tab-pane" id="tab4">
<p>Howdy, I'm in Section 4.</p>
</div>
</div>
</div>
</div>
</div>
Take a look at jsfiddle.net/simbirsk/RS4Xh/2

maybe this should help http://www.juvenpajares.com/?p=204 Custom Accordion Using Bootstrap Framework

The problem was that I didn't use an for the links in the inner tabs, but just a div with a's(had to do it for css reasons). I didn't know that bootstrap requires the links to be in a ul > li > a format. Now it know! I'll leave the question in case somebody has the same problem. Cheers for the help!

loading new page in tabs using twitter bootstrap

Hi I am using the following code to create tabbed layout using twitter bootstrap
<ul class="nav nav-tabs" >
<li class="active">Request Audit</li>
<li>status</li>
<li>Settings</li>
<li>Help</li>
</ul>
now in all tabs i need different page to load.So i want to do this :
<ul class="nav nav-tabs" >
<li class="active">Home</li>
<li>status</li>
<li>Settings</li>
<li>Help</li>
</ul>
I don't want to load the content from same page in all tabs and above code is not loading new page.Please help..
update :
<ul class="nav nav-tabs" id="myTab">
<li class="active">Request Audit</li>
<li>status</li>
<li>Settings</li>
<li>Help</li>
</ul>
<div class="tab-content">
<div class="tab-pane active" id="audit">
<p>audit</p>
</div>
<div class="tab-pane" id="status">
<p>status</p>
</div>
<div class="tab-pane" id="settings">
<p>settings</p>
</div>
<div class="tab-pane" id="help">
<p>help</p>
</div>
</div>
I have added this script
<script>
$('#myTab a[href="#status"]').click(function (e) {
e.preventDefault();
$(this).tab('show');
$('#status').load('status.html');
});
</script>

There are several ways to do this, but before deciding which one to use, I'd want to make sure you actually want to piece out your files like that. What's keeping you from just putting the content inside of the tabs on the page as it is?
If not, why not use PHP?
If you decide to stick with your current plan, the way I'd accomplish what you're looking to do would be through jQuery and AJAX.
First, you want to make sure you're using the proper Bootstrap structure – check out the Tabbable Nav section, and make your markup tabs correspond to empty content areas:
<div class="tabbable" style="margin-bottom: 18px;">
<ul class="nav nav-tabs">
<li class="active">Request Audit</li>
<li class="">Status</li>
<li class="">Settings</li>
<li class="">Help</li>
</ul>
<div class="tab-content" style="padding-bottom: 9px; border-bottom: 1px solid #ddd;">
<div class="tab-pane active" id="tab1">
<p>Placeholder 1</p>
</div>
<div class="tab-pane" id="tab2">
<p>Placeholder 2</p>
</div>
<div class="tab-pane" id="tab3">
<p>Placeholder 3</p>
</div>
<div class="tab-pane" id="tab4">
<p>Placeholder</p>
</div>
</div>
</div>​
Then, use jQuery.load to fill in the tab-panes!
$('#tab2').load('/status.html');
$('#tab3').load('/settings.html');
$('#tab4').load('/help.html');

Just remove the data-toggle="tab"
for example: on the Home Page:
<ul class="nav nav-tabs" >
<li class="active"><a href="#" >Home</a></li>
<li><a href="status.html" >status</a></li>
<li><a href="settings.html" >Settings</a></li>
<li><a href="help.html" >Help</a></li>
</ul>
<div class="tab-content">
<div class="tab-pane active" id="tab1">
<p>Home Page content 1</p>
</div>
</div>​
On the status.html page:
<ul class="nav nav-tabs" >
<li ><a href="#" >Home</a></li>
<li class="active"><a href="status.html" >status</a></li>
<li><a href="settings.html" >Settings</a></li>
<li><a href="help.html" >Help</a></li>
</ul>
<div class="tab-content">
<div class="tab-pane active" id="tab1">
<p>status content 1</p>
</div>
</div>​
The bad thing is just have some copy of the nav-tab codes