We Keep Coding

show one div and hide the rest using javascript

I have this script that shows/hides a div. Could anyone please explain how I can get it to show only one div at a time?
<script>
function Show_Div(Div_id) {
if (false == $(Div_id).is(':visible')) {
$(Div_id).show();
}
else {
$(Div_id).hide();
}
}
</script>
and the link...
onClick="Show_Div(Div_1)
Thanks!

Try using this
$(document).ready(function(){
$('.parent div').hide(); // hide div's on load using parent class as a starting point
$('#nav a').click(function() { // on the anchor clicks that are inside div with id=nav
var $div = $('.parent div').eq($(this).index('#nav a')); // get the relevant div
$div.show(); // show the relevant div
$('.parent div').not($div).hide(); // hide all but the relevant div
});​
}):

if i understand your question correctly , maybe you can try this way:
<script>
function Show_Div(Div_id) {
if (false == $(Div_id).is(':visible')) {
$(this).show();
}
else {
$(this).hide();
}
}
</script>
if your use this in
$(this).show();
the only one will toggle which your click~
but in this way :
$(Div_id).show();
you will get a array of target , because the selector of Jquery will select a array of target .
hope it will help you~

Jquery how to add a class containing two dashes?

I have a simple page which toggles the visibility of departments, with a nice icon to show whether or not it is visible.
I am using font-awesomes icons "fa-eye" and "fa-eye-slash"
Problem is when using addClass jquery ignores the second "-" making
$(this).addClass("fa-eye-slash")
Add the class "fa-eye".
Its very strange and i've never encountered something like this with jquery. Please can someone assist me on how to overcome/work around this.
heres the fiddle http://jsfiddle.net/m5cdpnhk/
Thanks

You have two if conditions which run one after the other.
If the first if runs, then one of the things it does is $(elm).addClass('fa-eye-slash');.
The second if condition is if ($(elm).hasClass("fa-eye-slash")) so if the first if runs then the second will always run.
You need an else statement.
$(elm).addClass('fa-eye-slash');
} else if ($(elm).hasClass("fa-eye-slash")) {
$(elm).removeClass("fa-eye-slash");

Add an else option (the problem is the two if without the else in this case)
$(".box-body ul li i").click(function () {
var elm = $(this);
if ($(elm).hasClass("fa-eye")) {
$(elm).removeClass("fa-eye");
$(elm).css("color", "red");
$(elm).addClass('fa-eye-slash');
}else{
//if ($(elm).hasClass("fa-eye-slash")) {
$(elm).removeClass("fa-eye-slash");
$(elm).addClass("fa-eye");
$(elm).css("color", "green");
//}
}
});
or toggle the class
.red:before{
color:red
}
.green:before{
color:green;
}
$(".box-body ul li i").click(function () {
var elm = $(this);
$(elm).toggleClass("fa-eye").toggleClass("red");
$(elm).toggleClass("fa-eye-slash").togglesClass("green");
});

i don't know why your code don't work but try this :
$(".box-body ul li i").click(function () {
var elm = $(this);
if ($(elm).hasClass("fa-eye")) {
$(elm).removeClass("fa-eye");
$(elm).css("color", "red");
$(elm).addClass('fa-eye-slash');
}else{
$(elm).removeClass("fa-eye-slash");
$(elm).addClass("fa-eye");
$(elm).css("color", "green");
}
});
http://jsfiddle.net/m5cdpnhk/2/

You have done mistake.you have to place "else if" at second if condition.
if ($(elm).hasClass("fa-eye")) {
$(elm).removeClass("fa-eye");
$(elm).css("color", "red");
$(elm).addClass('fa-eye-slash');
}
else if ($(elm).hasClass("fa-eye-slash")) {
$(elm).removeClass("fa-eye-slash");
$(elm).addClass("fa-eye");
$(elm).css("color", "green");
}

jQuery. Check onload if checkbox is checked and add css to div

MY PROBLEM
jQuery(document).ready(function () {
if ($('input.pokazkontakt').prop(':checked')) {
$(this).parent().nextAll('.pkbox:first').css('display', 'block');
} else {
$(this).parent().nextAll('.pkbox:first').css('display', 'none');
}
$('input.pokazkontakt').click(function () {
$(this).parent().nextAll('.pkbox:first').toggle('fast');
});
});
Demo
2nd part of JS is working (toogle), but i want to check first if checkbox is checked and hide the div or show. Where is a problem?

Try this:
jQuery(document).ready(function () {
$('input.pokazkontakt').each(function(){
if ($(this).is(':checked')) {
$(this).parent().nextAll('.pkbox:first').css('display', 'none');
} else {
$(this).parent().nextAll('.pkbox:first').css('display', 'block');
}
});
$('input.pokazkontakt').click(function () {
$(this).parent().nextAll('.pkbox:first').toggle('fast');
});
});
Use your logic reversely when you set display:none and display:block.
Use .is to check for checked state.
Use .each to iterate all your checkboxes
DEMO

You can use .is()
if($('input.pokazkontakt').is(':checked'))
instead of if($('input.pokazkontakt').prop(':checked'))
Demo

Add/remove class while traversing through list-items

I don't quite understand why this isn't working. I'm trying to make it so .on() click will removeClass() .active-title from a list-item; Then addClass() .active-title to the next() list-item.
$(".next").on({
click: function(){
$('.active-title').removeClass(function(){
$(this).next().addClass('active-title');
}
});
});
Demo:
Link to JSFiddles Demo
Final Solution Demo in JSFIDDLES

You have some errors in your code
}
});
});
supposed to be
}); <--- closing of removeClass
} <-- closing for click function
});
Try this
$(".next").on({
click: function () {
// Find the actuve element
var $active = $('.active-title', 'ul');
// If the next element exists the get the element
// otherwise get the first li from the ul
var $nextElem = $active.next('li').length ? $active.next('li')
: $('ul').find('li:first');
// Add and remove class
$active.removeClass('active-title');
$nextElem.addClass('active-title');
}
});
Check Fiddle

On-click adding and removing background color of a table data(td)

i am using jquery for set background color to the table data and its working fine but i need when user again click the td the color should be deselect. its my script for add color.
java script:
jQuery('td').click(function () { $(this).addClass('active'); });
my css class:
.active{background-color:red;}
when user again click the td the class should remove. How to achieve this.

jQuery('td').click(function () { $(this).toggleClass('active'); });
toggleClass adds if it doesn't exist or removes if it does exist.

You can use
$(this).removeClass('active');
although you would need to do a check to see if it is already active, which would make your code look like this:
jQuery('td').click(function () {
if($(this).hasClass('active') {
$(this).removeClass('active');
} else {
$(this).addClass('active');
}
});
EDIT:
#Justice is more correct:
jQuery('td').click(function () { $(this).toggleClass('active'); });