We Keep Coding

How to fade between divs on click, starting with display none?

I came across this JSFiddle online whilst searching for a solution. It almost does what I need except I need to start with the div being hidden. I've tried playing around with it but being new to JS I've not had much luck.
I thought I'd put this here as a starting point to see if anyone could advise on the route I would need to take?
Any help would be appreciated.
$(document).ready(function () {
$('.pbox:gt(0)').hide();
$('#menu').on('click', 'a', function () {
$('.current').not($(this).closest('li').addClass('current')).removeClass('current');
var $this = $(this);
// fade out all open subcontents
$('.pbox:visible').fadeOut('slow', function () {
$('.pbox[id=' + $this.data('id') + ']').fadeIn('slow');
});
});
});
ul#menu {
margin:0;
padding:0;
list-style-type:none;
text-align: center;
}
ul#menu li {
position:relative;
float:left;
border-bottom:4px solid #efefef;
margin-right: 10px;
padding-right: 0px;
padding-bottom: 5px;
display: inline-block;
}
ul#menu .current {
border-bottom:4px solid #3d496a;
}
ul#menu li:hover {
border-bottom:4px solid #3d496a;
}
ul#menu li a {
padding:2px 2px;
text-decoration:none;
font:bold 8px Verdana, Georgia, "Times New Roman", Times, serif;
color:#68759c;
}
ul#menu li a:hover {
color:#8895b8;
border:none;
}
#div1 {display:none;}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul id="menu">
<li>Description
</li>
<li>Shipping and payment
</li>
<li>Returns
</li>
<li>Feedback
</li>
</ul>
<br>
<br>
<div class="pbox" id="div1">First Div</div>
<div class="pbox" id="div2">Second Div</div>
<div class="pbox" id="div3">Third Div</div>
<div class="pbox" id="div4">Fourth Div</div>

Just add display: none; in css to an element which you want to be hidden.
And remove class="active" from first li so that it's not chosen.
And modify js a little bit. See your function only shows a div if previously it hid. And if you start with all hidden it won't hide anything therefore it won't show anything.
$(document).ready(function() {
$('.pbox:gt(0)').hide();
$('#menu').on('click', 'a', function() {
$('.current').not($(this).closest('li').addClass('current')).removeClass('current');
var $this = $(this);
// fade out all open subcontents
var visibleElements = $('.pbox:visible');
if (visibleElements.length <= 0) {
$('.pbox[id=' + $this.data('id') + ']').fadeIn('slow');
} else {
visibleElements.fadeOut('slow', function() {
$('.pbox[id=' + $this.data('id') + ']').fadeIn('slow');
});
}
});
});
ul#menu {
margin: 0;
padding: 0;
list-style-type: none;
text-align: center;
}
ul#menu li {
position: relative;
float: left;
border-bottom: 4px solid #efefef;
margin-right: 10px;
padding-right: 0px;
padding-bottom: 5px;
display: inline-block;
}
ul#menu .current {
border-bottom: 4px solid #3d496a;
}
ul#menu li:hover {
border-bottom: 4px solid #3d496a;
}
ul#menu li a {
padding: 2px 2px;
text-decoration: none;
font: bold 8px Verdana, Georgia, "Times New Roman", Times, serif;
color: #68759c;
}
ul#menu li a:hover {
color: #8895b8;
border: none;
}
.pbox {
display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul id="menu">
<li>Description
</li>
<li>Shipping and payment
</li>
<li>Returns
</li>
<li>Feedback
</li>
</ul>
<br>
<br>
<div class="pbox" id="div1">First Div</div>
<div class="pbox" id="div2">Second Div</div>
<div class="pbox" id="div3">Third Div</div>
<div class="pbox" id="div4">Fourth Div</div>
EDIT
If you want to hide all the divs on click anywhere else here is how to:
It's actually pretty easy.
We bind click event to document and check what was clicked.
If it was div with content (#div1, #div2 etc.) or if it is menu element we do not want to hide the div, but else we do.
$(document).on('click', function(e) {
if (!$(e.target).hasClass("pbox") && $(e.target).closest("#menu").length <= 0) {
$('.pbox').fadeOut('slow');
$("#menu .current").removeClass("current");
}
});
e.target returns an element which (in this case) was clicked. If it has class pbox it means this is a div with content.
Second condition is menu element. If .closest() function
Description: For each element in the set, get the first element that matches the selector by testing the element itself and traversing up through its ancestors in the DOM tree.
returns an element with id="menu" it means that we clicked on an element inside the menu.
Notice the exclamation mark. It means that if the condition is false return true. So if we did not click the div with content and if we did not click menu element then we hide the div.
I hope you understand what I mean :)
$(document).ready(function() {
$('#menu').on('click', 'a', function() {
$('.current').not($(this).closest('li').addClass('current')).removeClass('current');
var $this = $(this);
// fade out all open subcontents
var visibleElements = $('.pbox:visible');
if (visibleElements.length <= 0) {
$('.pbox[id=' + $this.data('id') + ']').fadeIn('slow');
} else {
visibleElements.fadeOut('slow', function() {
$('.pbox[id=' + $this.data('id') + ']').fadeIn('slow');
});
}
});
$(document).on('click', function(e) {
if (!$(e.target).hasClass("pbox") && $(e.target).closest("#menu").length <= 0) {
$('.pbox').fadeOut('slow');
$("#menu .current").removeClass("current");
}
});
});
ul#menu {
margin: 0;
padding: 0;
list-style-type: none;
text-align: center;
}
ul#menu li {
position: relative;
float: left;
border-bottom: 4px solid #efefef;
margin-right: 10px;
padding-right: 0px;
padding-bottom: 5px;
display: inline-block;
}
ul#menu .current {
border-bottom: 4px solid #3d496a;
}
ul#menu li:hover {
border-bottom: 4px solid #3d496a;
}
ul#menu li a {
padding: 2px 2px;
text-decoration: none;
font: bold 8px Verdana, Georgia, "Times New Roman", Times, serif;
color: #68759c;
}
ul#menu li a:hover {
color: #8895b8;
border: none;
}
.pbox {
display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul id="menu">
<li>Description
</li>
<li>Shipping and payment
</li>
<li>Returns
</li>
<li>Feedback
</li>
</ul>
<br>
<br>
<div class="pbox" id="div1">First Div</div>
<div class="pbox" id="div2">Second Div</div>
<div class="pbox" id="div3">Third Div</div>
<div class="pbox" id="div4">Fourth Div</div>

i just delete the class "current". but first div still appear, so i create another div, empty, and it works :)
$(document).ready(function () {
$('.pbox:gt(0)').hide();
$('#menu').on('click', 'a', function () {
$('.current').not($(this).closest('li').addClass('current')).removeClass('current');
var $this = $(this);
// fade out all open subcontents
$('.pbox:visible').fadeOut('slow', function () {
$('.pbox[id=' + $this.data('id') + ']').fadeIn('slow');
});
});
});
ul#menu {
margin:0;
padding:0;
list-style-type:none;
text-align: center;
}
ul#menu li {
position:relative;
float:left;
border-bottom:4px solid #efefef;
margin-right: 10px;
padding-right: 0px;
padding-bottom: 5px;
display: inline-block;
}
ul#menu .current {
border-bottom:4px solid #3d496a;
}
ul#menu li:hover {
border-bottom:4px solid #3d496a;
}
ul#menu li a {
padding:2px 2px;
text-decoration:none;
font:bold 8px Verdana, Georgia, "Times New Roman", Times, serif;
color:#68759c;
}
ul#menu li a:hover {
color:#8895b8;
border:none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul id="menu">
<li>Description
</li>
<li>Shipping and payment
</li>
<li>Returns
</li>
<li>Feedback
</li>
</ul>
<br>
<br>
<div class="pbox" id="div5"></div>
<div class="pbox" id="div1">First Div</div>
<div class="pbox" id="div2">Second Div</div>
<div class="pbox" id="div3">Third Div</div>
<div class="pbox" id="div4">Fourth Div</div>

Delete class="current", so none is active at the beginning,
and then set the first div to display:none;

Stop redirect on an onsubmit function that adds another tab

I am building an on submit function to create a div, id, and class, that builds a new tab. I'm able to see that on submit, it does seem to create the list item, the redirect causes the list item to be deleted and sent back to the original page. I wanted to add content to the tab, but that becomes useless once the redirect happens. If someone could show where the problem is occurring that would be helpful.
/**Covers tab animations
May not matter just had to make sure*/
jQuery(document).ready(function(){
jQuery('.tabs .tab-links a').on('click', function(e){
var currentAttrValue = jQuery(this).attr('href');
$('.tabs ' + currentAttrValue).show();
$('.tabs ' + currentAttrValue).animate({opacity:1, paddingLeft:'30%'}, 400);
$('.tabs ' + currentAttrValue).siblings().css({opacity:0, paddingLeft:'0%'});
$('.tabs ' + currentAttrValue).fadeIn(400).siblings().hide();
jQuery(this).parent('li').addClass('active').siblings().removeClass('active');
e.preventDefault();
});
});
/** for the onsubmit functions*/
$(function(){
//catches the information entered into form
var $textInput = $('.examine input:text');
$('#examine').on('submit', function(e){
e.preventDefault;
//puts the information into a variable
var newText = $textInput.val();
//adds a new tab to list
$('li:last').append('<li>' + "newText" + '</li>');
$textInput.val('');
});
});
.tab-links{
float:left;
}
.tab-links:after {
display:block;
clear:both;
content:'';
}
.tab-links li {
list-style-type: none;
border-bottom: 3px solid;
letter-spacing: 0.09em;
margin-left: -25%;
}
.tab-links li a {
color: #f2f2f2;
display: block;
padding: 3px 10px 3px 10px;
text-decoration: none;
}
.tab-links a:hover {
background:#a7cce5;
text-decoration:none;
}
.tab-links li.active, .tab-links li.hover {
background-color: #e5e5e5;
border-bottom: 3px solid #e5e5e5;
}
.tab-links li.active a, .tab-links li a:hover {
color: #666;
background-color: #e5e5e5;
}
/*----- Content of Tabs -----*/
.tab-content {
background-color: #e5e5e5;
color: #666;
min-height: 150px;
overflow: auto;
}
#tab1{
padding-left: 30%;
}
#tab2, #tab3, #tab4 {
display:none;
opacity: 0;
padding-left: 0%;
}
.tab-content p {
margin: 20px;
text-indent: -40%;
}
.tab-content.active{
display: block;
text-indent: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<div id="sidebar">
<div id="explore">
<form id="examine">
<p>Search</p>
<input type="search" name="explore" placeholder="Search Items" />
<p>Choose Your Search Restrictions</p>
<input type="radio" name="location" required= "required" value="Your School" />Inside
<input type="radio" name="location" required= "required" value="Whole system" />Outside
<input type="submit" value="Search" />
</form>
</div>
<div class="tabs">
<ul class="tab-links">
<li class="active">Tab1</li>
<li>Tab2</li>
<li>Tab3</li>
<li>Tab4</li>
</ul>
<div class="tab-content">
<div id="tab1" class="tab active">
<p>Tab1 content</p>
</div>
<div id="tab2" class="tab">
<p>Tab2 content</p>
</div>
<div id="tab3" class="tab">
<p>Tab3 content</p>
</div>
<div id="tab4" class="tab">
<p>Tab4 content</p>
</div>
</div>
</div>
</div>

You need to call your e.preventDefault(), you forgot to call the second one.

JS Smooth Scroll not working with tabs

I am having some issue with some code I have. I have a set of tabs that have content within each of them. When a user clicks at tab, i'd like it to open the tab content AND smooth scroll to the anchor that is in the tab content. Currently, I have the following code that opens the active tabs content and scrolls to the anchor. However, it won't smooth scroll, itll just jump to the anchor. Could someone help me so that it smooth scrolls to the anchor? I would appreciate any and all help.
Current Fiddle that shows the jump
My website with a live example of what happens
Code
var hrefname = null;
$('a').click(function () {
var $tab = $(this).closest('li')
if (!$tab.hasClass("active")) {
var tabNum = $tab.index();
var nthChild = tabNum + 1;
$("ul#tabs li.active").removeClass("active");
$(this).addClass("active");
$("ul#tab li.active").removeClass("active").hide();
$("ul#tab li:nth-child(" + nthChild + ")").addClass("active").show();
}
setTimeout(function () {
$('html, body').animate({
scrollTop: $('[name="' + hrefname + '"]').offset().top
}, 500);
var href = $('a').attr('href');
console.log(href);
hrefname = href;
return false;
}, 10000);
});
HTML Tabs
<ul id="tabs">
<li class="active">FEATURES </li>
<li>SPECIFICATIONS</li>
<li>COMPARE CONFIGURATIONS</li>
<ul id="tab">
<li class="active">
<a name="features"></a>Content 1
</li>
<li>
<a name="specs"></a>Content 2
</li>
<li>
<a name="config"></a>Content 3
</li>
CSS (for those interested)
ul#tabs {
list-style-type: none;
padding: 0;
text-align: left;
}
ul#tabs li {
display: inline-block;
background-color: #ffffff;
border-bottom: solid 3px #ffffff;
padding: 5px 12px;
margin-bottom: 4px;
margin-right: 55px;
color: #e5e5e5;
font-size: 20px;
cursor: pointer;
}
ul#tabs li:hover {
border-bottom: solid 3px #dd3333;
color: #000000;
}
ul#tabs li.active {
border-bottom: solid 3px #dd3333;
color: #000000;
}
ul#tab {
list-style-type: none;
margin: 0;
padding: 0;
}
ul#tab li {
display: none;
}
ul#tab li.active {
display: block;
}

How to insert text anchor inside attributes onclick?

I have a jquery tab and it's working fine.
Fiddle here
$(document).ready(function() {
$('.nnntabs ul a').on('click', function(e) {
var current = $(this).attr('href');
$('.tab-content > div' + current).fadeIn('slow').show().siblings().hide();
$(this).parent('li').addClass('active').siblings().removeClass('active');
e.preventDefault();
});
});
I just wanted to add more feature. The text anchor should be dynamically inserted inside the href and id attributes to activate the tab, or maybe replaced if there is a default value... The source of the value of href and id will be the text anchor of the menu. My fiddle sample is working fine because I inserted the values manually. Please help me turn this into reality... Thank you.

I think what you are looking for is
$(document).ready(function() {
var $content = $('.nnntabs > .tab-content > div');
$('.nnntabs > ul a').each(function(i) {
$(this).data('tab', 'tab-' + i);
$content.eq(i).attr('id', 'tab-' + i)
})
$('.nnntabs ul a').on('click', function(e) {
var current = $(this).data('tab');
$('#' + current).fadeIn('slow').show().siblings().hide();
$(this).parent('li').addClass('active').siblings().removeClass('active');
e.preventDefault();
});
});
.nnntabs {
width: 100%;
}
.nnntabs ul {
width: 100%;
margin: 0;
padding: 0;
}
.nnntabs ul li {
display: inline-block;
list-style: none;
border: 1px solid #ddd;
border-bottom: 0
}
.nnntabs ul li a {
padding: 8px 10px;
display: block;
font-size: 1em;
font-weight: bold;
color: #4c4c4c;
background: #eee;
}
.nnntabs ul li.active > a {
background: #fff;
color: #4c4c4c;
margin-bottom: -1px;
padding-bottom: 9px;
}
.tab-content {
padding: 10px;
border: 1px solid #ddd;
}
.tab-content > div {
display: none;
}
.tab-content > .active {
display: block;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="nnntabs">
<ul>
<li class="active">tab1</li>
<li>tab2</li>
<li>tab3</li>
</ul>
<div class="tab-content">
<div class="active">
content1
</div>
<div>
content2
</div>
<div>
cotent3
</div>
</div>
</div>

Adding 3rd level to CSS menu

I am using very old portal where the is not defined in the begining of the html code, and also I managed to use a jquery/css horizontal drop menu, I need help adding third level to the menu here is my code
#jsddm {
margin: 0;
padding: 0
}
#jsddm li {
float: left;
list-style: none;
font: 12px Tahoma, Arial
}
#jsddm li a {
display: block;
background: #324143;
padding: 5px 12px;
text-decoration: none;
border-right: 1px solid white;
width: 70px;
color: #EAFFED;
white-space: nowrap
}
#jsddm li a:hover {
background: #24313C
}
#jsddm li ul {
margin: 0;
padding: 0;
position: absolute;
visibility: hidden;
border-top: 1px solid white
}
#jsddm li ul li {
float: none;
display: inline
}
#jsddm li ul li a {
width: auto;
background: #A9C251;
color: #24313C
}
#jsddm li ul li a:hover {
background: #8EA344
}
<script src="jquery.min.js" type="text/javascript"></script>
<script type="text/javascript">
var timeout = 500;
var closetimer = 0;
var ddmenuitem = 0;
function jsddm_open()
{ jsddm_canceltimer();
jsddm_close();
ddmenuitem = $(this).find('ul').eq(0).css('visibility', 'visible');}
function jsddm_close()
{ if(ddmenuitem) ddmenuitem.css('visibility', 'hidden');}
function jsddm_timer()
{ closetimer = window.setTimeout(jsddm_close, timeout);}
function jsddm_canceltimer()
{ if(closetimer)
{ window.clearTimeout(closetimer);
closetimer = null;}}
$(document).ready(function()
{ $('#jsddm > li').bind('mouseover', jsddm_open);
$('#jsddm > li').bind('mouseout', jsddm_timer);});
document.onclick = jsddm_close;
</script>
and here is the menu
<ul id="jsddm">
<li>About us
<ul>
<li>Mission
<ul>
<li>Mission Statment 1</li>
</ul>
</li>
<li> vision </li>
<li>status </li>
</ul>
</li>
<li> Contact
<ul>
<li>Office </li>
<li> Support </li>
</ul>
</li>
</ul>
as you can see the 3rd level "Mession Statment 1" doesn't appear, and that's my problem, any suggestion ???

The problem is maybe due to these lines
$('#jsddm > li').bind('mouseover', jsddm_open);
$('#jsddm > li').bind('mouseout', jsddm_timer);
in which you set an event handler only to the direct <li> children of #jsddm element. But your third <ul> is not contained in a such <li>, so try to change the above lines in
$('#jsddm li').bind('mouseover', jsddm_open);
$('#jsddm li').bind('mouseout', jsddm_timer);
and
function jsddm_open() {
...
ddmenuitem = $(this).children('ul:first').css('visibility', 'visible');}