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;

How to change script to use more UL select boxes?

I found this code for ul select box. I need 3 different ul select boxes. So I made some changes but now is slide up only last "Year" select box. Is there a problem with "selected" tag?
ORIGINAL CODE:
$("ul").on("click", ".init", function() {
$(this).closest("ul").children('li:not(.init)').slideDown();
});
var allOptions = $("ul").children('li:not(.init)');
$("ul").on("click", "li:not(.init)", function() {
allOptions.removeClass('selected');
$(this).addClass('selected');
$("ul").children('.init').html($(this).html());
allOptions.slideUp();
});
ul {
height: 30px;
width: 150px;
border: 1px #000 solid;
}
ul li { padding: 5px 10px; z-index: 2; }
ul li:not(.init) { float: left; width: 130px; display: none; background: #ddd; }
ul li:not(.init):hover, ul li.selected:not(.init) { background: #09f; }
li.init { cursor: pointer; }
a#submit { z-index: 1; }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<ul>
<li class="init">[SELECT]</li>
<li data-value="value 1">Option 1</li>
<li data-value="value 2">Option 2</li>
<li data-value="value 3">Option 3</li>
</ul>
MY CODE:
$(".day ul").on("click", ".active", function() {
$(this).closest(".day ul").children('li:not(.active)').slideDown();
});
var allOptions = $(".day ul").children('li:not(.active)');
$(".day ul").on("click", "li:not(.active)", function() {
allOptions.removeClass('selected');
$(this).addClass('selected');
$(".day ul").children('.active').html($(this).html());
allOptions.slideUp();
});
$(".month ul").on("click", ".active", function() {
$(this).closest(".month ul").children('li:not(.active)').slideDown();
});
var allOptions = $(".month ul").children('li:not(.active)');
$(".month ul").on("click", "li:not(.active)", function() {
allOptions.removeClass('selected');
$(this).addClass('selected');
$(".month ul").children('.active').html($(this).html());
allOptions.slideUp();
});
$(".year ul").on("click", ".active", function() {
$(this).closest(".year ul").children('li:not(.active)').slideDown();
});
var allOptions = $(".year ul").children('li:not(.active)');
$(".year ul").on("click", "li:not(.active)", function() {
allOptions.removeClass('selected');
$(this).addClass('selected');
$(".year ul").children('.active').html($(this).html());
allOptions.slideUp();
});
.day, .month, .year{
float:left;
width:100px;
display:block;
width:auto;
height: 34px;
}
.day ul, .month ul, .year ul {
list-style-type:none;
cursor: pointer;
width: 100px;
}
.day ul li, .year ul li, .month ul li {
float: left;
width:100px;
text-indent: 5px;
height: 34px;
line-height: 34px;
border:1px solid #000;
background: #fff;
}
.day ul li.active, .month ul li.active, .year ul li.active {
}
.day ul li a, .month ul li a, .year ul li a {
text-decoration: none;
color: #000;
}
.day ul li:not(.active), .month ul li:not(.active), .year ul li:not(.active) {
float: left;
display: none;
}
.day ul li:not(.active):hover, .day ul li.selected:not(.active), .month ul li:not(.active):hover, .month ul li.selected:not(.active), .year ul li:not(.active):hover, .year ul li.selected:not(.active) {
background: #f5f5f5;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js"></script>
<div class="day">
<ul>
<li class="active">Day</li>
<li>01.08</li>
<li>02.08</li>
<li>03.08</li>
<li>04.08</li>
<li>05.08</li>
</ul>
</div>
<div class="month">
<ul>
<li class="active">Month</li>
<li>01</li>
<li>02</li>
<li>03</li>
<li>04</li>
<li>05</li>
</ul>
</div>
<div class="year">
<ul>
<li class="active">Year</li>
<li>2016</li>
<li>2017</li>
<li>2018</li>
<li>2019</li>
<li>2020</li>
</ul>
</div>

you just need to wrap up the original code with an iterator and your problem will be solved.
I have create an example on codepen with 3 UL tags, you can copy and paste the UL blocks to have the same code work on all UL tags
This is what your js code should look like.
JS:
$(document).ready(function(){
$("ul").each(function(){
var $thisUL = $(this);
$thisUL.on("click", ".init", function() {
$(this).closest("ul").children('li:not(.init)').slideDown();
});
var allOptions = $thisUL.children('li:not(.init)');
$thisUL.on("click", "li:not(.init)", function() {
allOptions.removeClass('selected');
$(this).addClass('selected');
$thisUL.children('.init').html($(this).html());
allOptions.slideUp();
});
});
});

Converting a UL LI Single Select Box to a Multiple Select Box

I really need the help of an expert here on this site. I'd like to be able to, add on and build functionality such that my custom UL LI single select boxes, would be able to handle multiple user selections.
Here's the typical scenario, the user holds down the CTRL Key on their keyboard and selects multiple values from the select box.
Here is a quick fiddle: http://jsfiddle.net/c2ezuw24/1/
Here is the existing Markup:
<!DOCTYPE html>
<html>
<head>
<script src="jquery.min.js" type="text/javascript"></script>
<style type="text/css">
body { font-family:Arial, Helvetica, Sans-Serif; font-size:0.75em; color:#000;}
.dropdown dd, .dropdown dt, .dropdown ul {
margin:0px;
padding:0px;
}
.dropdown dd {
position:relative;
}
.dropdown a, .dropdown a:visited { color:#816c5b; text-decoration:none; outline:none;}
.dropdown a:hover { color:#000;}
.dropdown dt a:hover, .dropdown dt a:focus {
border: 1px solid rgb(128,128,128);
}
.dropdown dt a {
background:#e4dfcb url(arrow.png) no-repeat scroll right center;
display:block;
padding-right:20px;
border:1px solid rgb(170,170,170);
width:150px;
}
.dropdown dt a span {
cursor:pointer;
display:block;
padding:5px;
}
.dropdown dd ul {
background:#e4dfcb none repeat scroll 0 0;
border:1px solid rgb(170,170,170);
display:none;
left:0px;
padding:5px 0px;
position:absolute;
top:2px;
width:auto;
min-width:170px;
list-style:none;
}
.dropdown span.value { display:none;}
.dropdown dd ul li a { padding:5px; display:block;}
.dropdown dd ul li a:hover { background-color:#d0c9af;}
.dropdown img.flag { border:none; vertical-align:middle; margin-left:10px; }
.flagvisibility { display:none;}
</style>
<script type="text/javascript">
$(document).ready(function() {
$(".dropdown img.flag").addClass("flagvisibility");
$(".dropdown dt a").click(function() {
$(".dropdown dd ul").toggle();
});
$(".dropdown dd ul li a").click(function() {
var text = $(this).html();
$(".dropdown dt a span").html(text);
$(".dropdown dd ul").hide();
$("#result").html("Selected value is: " + getSelectedValue("sample"));
});
function getSelectedValue(id) {
return $("#" + id).find("dt a span.value").html();
}
$(document).bind('click', function(e) {
var $clicked = $(e.target);
if (! $clicked.parents().hasClass("dropdown"))
$(".dropdown dd ul").hide();
});
$("#flagSwitcher").click(function() {
$(".dropdown img.flag").toggleClass("flagvisibility");
});
});
</script>
</head>
<body>
<dl id="sample" class="dropdown">
<dt><span>Please select the country</span></dt>
<dd>
<ul>
<li>Brazil<img class="flag" src="br.png" alt="" /><span class="value">BR</span></li>
<li>France<img class="flag" src="fr.png" alt="" /><span class="value">FR</span></li>
<li>Germany<img class="flag" src="de.png" alt="" /><span class="value">DE</span></li>
<li>India<img class="flag" src="in.png" alt="" /><span class="value">IN</span></li>
<li>Japan<img class="flag" src="jp.png" alt="" /><span class="value">JP</span></li>
<li>Serbia<img class="flag" src="cs.png" alt="" /><span class="value">CS</span></li>
<li>United Kingdom<img class="flag" src="gb.png" alt="" /><span class="value">UK</span></li>
<li>United States<img class="flag" src="us.png" alt="" /><span class="value">US</span></li>
</ul>
</dd>
</dl>
<span id="result"></span>
</body>
</html>

use built in html feature.
http://jsfiddle.net/2v8foz90/
<select multiple>
<option value="DEDE">Hello</option>
<option value="FEFE">bonjour</option>
<option value="SESE">Ciao</option>
<option value="AEAE">hallo</option>
</select>

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');}