We Keep Coding

Change bgcolor on toggled tr and on key shortcut

I have the following toggle function filter() where I display the childrow of a table when the <tr> parent is being clicked. In this function I've also included a key shortcut, so whenever ALT+A is pressed all the childrows are displayed.
In addition I have another script, mouseover(), where the background color of the parent tr is changed to #2C4367 hover.
So here's my question: How can I toggle the background-color of a tr parent whenever I expand (click on) it and back to normal when it is closed. This function should also work on all tr parents when the key shortcut is pressed, so the background color of all parent tr's is changed when the shortcut is being pressed.
I hope I made myself clear. Otherwise please say so and I will try to elaborate.
Toggle filter() script:
$(document).ready(function mouseover(){
$(".parent").hover(function(){
$(this).css("background", "#2C4367");
$(this).css("color", "#FFFFFF");
},
function(){
$(this).css("background", "#FFFFFF");
$(this).css("color", "#000000");
});
});
Change bgcolor mouseover() script:
$(document).ready(function filter() {
$('table.detail').each(function() {
var $table = $(this);
$table.find('.parent').click(function() {
$(this).nextUntil('.parent').toggle(); // must use jQuery 1.4 for nextUntil() method
}); /// Below is toggle on image
var $childRows = $table.find('tbody tr').not('.parent').hide();
$("img.pushme").toggle(function funcVis() {
$childRows.show();
},
function() { $childRows.hide();
});
shortcut.add("Alt+A",function(){ funcVis() }); /// Shortcut functions
shortcut.add("Alt+N",function(){ expandform() }); /// Shortcut functions
});
});

Create a CSS class that defines the background-color change, and apply or remove it with
$(target).parent().toggleClass('yourclass');
Insert this line wherever the expand is triggered.

Solved!
JSFiddle
function toggle(it) {
if ((it.className == "") || (it.className == "rowactive")) {
it.className = "rownotactive";
} else {
it.className = "rowactive";
}
}
$(document).ready(function filter() {
$('table.detail').each(function () {
var $table = $(this);
$table.find('.parent').click(function () {
$(this).toggleClass('rowactive');
$(this).nextUntil('.parent').toggle();
}); /// Below is toggle on image
var $childRows = $table.find('tbody tr').not('.parent').hide();
$("img.pushme").toggle(function funcVis() {
$("tr.parent").addClass('rowactive');
$childRows.show();
},
function () {
$("tr.parent").removeClass('rowactive');
$childRows.hide();
});
shortcut.add("Alt+N", function () {
expandform()
}); /// Shortcut functions
});
});

jQuery hide and show text input

I want to do a simple function in Jquery: when a button is clicked show the input text, when it's clicked again- hide the input text.
<div>
<div id="btnNewGroup">New Group</div>
<input type="text" id="newGroup" style="display:none" />
</div>
and this is the scrupt section:
$(document).ready(function () {
$("#btnNewGroup").click(function () {
if ($("#newGroup").hide()) {
$("#newGroup").show();
}
else {
$("#newGroup").hide()
}
});
});
when I click the button the text input is showing, when I click it again I want the input text to be hidden, but nothing happens.

You can use toggle() to show / hide
Live Demo
$("#btnNewGroup").click(function () {
$("#newGroup").toggle();
});
The problem with the condition you have is that you are hiding the element instead of checking if it is hidden. You can is with :hidden like is(':hidden') to check if element is hidden.
if ($("#newGroup").is(':hidden')) {
$("#newGroup").show();
else
$("#newGroup").hide();

if ($("#newGroup").hide())
The hide function does not return a boolean value so you can't use it in an if statement. It returns a jQuery object which is always true so your second block never gets hit.
You can try two things:
$(document).ready(function () {
$("#btnNewGroup").click(function () {
if ($("#newGroup").is(":visible")) {
$("#newGroup").hide();
}
else {
$("#newGroup").show()
}
});
});
Or a simple toggle:
$(document).ready(function () {
$("#btnNewGroup").click(function () {
$("#newGroup").toggle();
});
});
Additionally, when working with selectors multiple times it's a good idea to cache the element - otherwise jQuery tries to find the element each time you try:
$(document).ready(function () {
$("#btnNewGroup").click(function () {
var $newGroup = $("#newGroup"); // Cache it here
if ($newGroup.is(":visible")) {
$newGroup.hide();
}
else {
$newGroup.show()
}
});
});

use .toggle() for hide and show alternatively in jquery
$("#btnNewGroup").click(function () {
$("#newGroup").toggle();
});

Demo
Use .toggle() function
$("#btnNewGroup").click(function () {
$("#newGroup").toggle()
});
Or use :visible pseudo selector with is()
Demo
$(document).ready(function () {
$("#btnNewGroup").click(function () {
if ($("#newGroup").is(":visible")) {
$("#newGroup").hide();
}
else {
$("#newGroup").show()
}
});
});
Note :hide() function does not return boolean value. Use is(:visible) or is(:hidden)

You need to change
if ($("#newGroup").hide()) {
to (just one possible solution)
if ($("#newGroup").css('display')=='none') {
Because $("#newGroup").hide() will always return true.
And here are the full code:
$(document).ready(function () {
$("#btnNewGroup").click(function () {
if ($("#newGroup").css('display')=='none') {
$("#newGroup").show();
}
else {
$("#newGroup").hide()
}
});
});

Have a look at the .toggle() function within the API.
http://api.jquery.com/toggle/

document.getElementById("username").style.display='block';

How to 'toggle' click multiple elements on page in JQuery?

Lets say I have 10 with red color on my page, and they have same class which is called 'myspan'.
Here is what I want:
Click an element, and then the clicked one change its color to green.
what I did:
<script>
$(document).ready(function(){
$('.myspan').click(function(){
aaa = !aaa;
if(aaa){
$(this).css('color','green');
} else {
$(this).css('color','red');
}
});
})
</script>
This works! It almost achieve what I want. When I click one element, it changes to green successfully. But I have to click twice for another red element to make it green. I hope you guys know what I mean if you watch the code. Does anyone have any idea about how to solve the problem?

You can use .toggleClass() instead.Try this:
$(".myspan").click(function () {
$(this).toggleClass("red");
});
CSS:
.myspan{ color: green; }
.myspan.red{ color: red; }
Working Demo

You need to have a state for each span separately so instead of using a common variable you can use the .data() api like
$(document).ready(function () {
$('.myspan').click(function () {
var $this = $(this),
aaa = $this.data('aaa');
aaa = !aaa;
$this.css('color', function () {
return aaa ? 'green' : 'red';
})
$this.data('aaa', aaa);
});
})
Demo: Fiddle

I would not use any variable, as long as your script's function is going to say that simple. Better try it like this:
Javascript:
$(document).ready(function () {
$('.myspan').click(function () {
if ($(this).hasClass('color-red')) {
$(this).removeClass('color-red').addClass('color-green');
} else {
$(this).removeClass('color-green').addClass('color-red');
}
});
})
CSS:
.myspan {
}
.color-red {
color:red;
}
.color-green {
color:green;
}
Working Fiddle: http://jsfiddle.net/2729p/
This saves the need to use a state saving variable and makes it more modular.

Try below code
<script>
$(document).ready(function(){
$('.myspan').click(function(){
var colorVal = $(this).css('color');
if(colorVal === 'red'){
$(this).css('color','green');
} else {
$(this).css('color','red');
}
});
})
</script>

You would be better off using toggleClass
<span class="myspan">Test</span>
JQuery:
$('.myspan').click(function () {
$(this).toggleClass("green");
});
CSS:
.myspan{
color: red;
}
.green {
color: green
}
Example

Searchable check box list is not working

Here is script i wrote to achive searchable check box list but for some reason it is not acting please help!
It should search Regardless of Case and empty lines should be removed
$(function() {
$('#filter').on('keyup', function() {
alert('h');
var query = this.value;
$('.checkboxLabel').each(function(i, elem) {
if (elem.value.indexOf(query) != -1) {
$(this).closest('label').show();
}else{
$(this).closest('label').hide();
}
});
});
Here is the fiddle http://jsfiddle.net/xHxWt/
UPDATE : Thanks Everyone : Down is the fully working fiddle posted it if anyone needs the same
http://jsfiddle.net/xHxWt/9/

You missed the jQuery plugin (which you already found out).
Also, a label doesn't have a value, you need to use .text() instead.
Try:
$(function () {
$('#filter').on('keyup', function () {
var query = this.value;
$('.checkboxLabel').each(function (i, elem) {
if ($(this).text().indexOf(query) != -1) {
$(this).show();
$(this).prev(':checkbox').show();
} else {
$(this).hide();
$(this).prev(':checkbox').hide();
}
});
});
});
Fiddle
Update:
Hide / show checkbox as well.

You can try this code to hide label as well as checkbox
$(function() {
$('#filter').on('keyup', function() {
var query = this.value;
$('.checkboxLabel').each(function(i, elem) {
if ($(this).text().indexOf(query) != -1) {
$(this).closest('label').show();
$(this).prev().show();
} else {
$(this).closest('label').hide();
$(this).prev().hide();
}
});
});
});
There is also plugin for multiple selection or single.you can try this one also.
http://harvesthq.github.io/chosen/

Swap back image on hover out with Jquery

I have this HTML code:
<img class="swap" src="/Static/Images/Meny_normal_01.png" alt="" />
and this is my Jquery code and what it does is that when I hover over my img it swaps to another img, but I would like to have a hover out and then it swap back to the old img.
$(document).ready(function () {
$('.swap').hover(function () {
$(this).attr('src', '/Static/Images/Meny_hover_01.png');
});
});
Would appreciate any kind of help

.hover() binds two handlers to the matched elements, to be executed when the mouse pointer enters and when you leaves the elements.
$(".swap").hover(
function () {
$(this).attr('src', '/Static/Images/Meny_hover_01.png');
},
function () {
$(this).attr('src', '/Static/Images/Meny_normal_01.png');
}
);

You can pass 2 handlers into the hover - like this:
$(document).ready(function () {
$('.swap').hover(function () {
$(this).attr('src', '/Static/Images/Meny_hover_01.png');
},
function () {
$(this).attr('src', '/Static/Images/Meny_normal_01.png');
}
);
});
Have a look at: http://api.jquery.com/hover/ for more info
Or a similar item on SO: jquery change image on mouse rollover

$(".swap").hover(function() {
$(this).attr("src", function(i, val) {
return val.indexOf("hover") == -1
? val.replace("normal", "hover")
: val.replace("hover", "normal");
});
});
DEMO: http://jsfiddle.net/UJR8M/