We Keep Coding

How can I toggle background color and toggle slide at the same time?

I want to toggle background-color and slideToggle on click. I also want a hover-over effect on all buttons. My hover-over effect stops working after the first click. I also haven't figured out a good way to toggle background-color as you will see by my code.
Here is my jsfiddle. This JavaScript code doesn't work if the same button is clicked twice:
$('#11').show().css({'background-color':'#cccccc'});
$('#22,#33,#44,#55,#66').show().css({'background-color':'white'});
Also, if you have any suggestions on how to make my JavaScript code cleaner/shorter, I'd like to see them.

With a little clean up you can simplify this whole thing a lot:
jquery
$(document).ready(function(){
$('.button')
.on('click', function () {
$('.button').not(this)
.removeClass('selected')
$('p.displayed').not($(this).next().next())
.slideUp()
.removeClass('displayed')
$(this)
.toggleClass('selected')
.next(/*br*/).next(/*p*/)
.slideToggle()
.addClass('displayed')
})
});
css
button.selected {
background-color: #ccc;
}
src: https://jsfiddle.net/yLr5equc/14/ (sorry, at first I forgot to hide the previous slideDown.. this is resolved now)

"Also, if you have any suggestions on how to my my javascipt
cleaning/shorter, I'm happy to listen. "
You don't need to repeat $(document).ready(function(){} every time for every new function/object. One $(document).ready(function(){} can store all your javascript/jquery code. That will shorten your code alot and make it less messy.
Like I did here: https://jsfiddle.net/yLr5equc/3/

Because the style defined in CSS has been overridden by jQuery-added inline style, therefore in .button:hover, add !important to background-color to make it the highest priority.
.button:hover {
background-color: #e6e6e6 !important;
cursor: pointer;
}
Updated solution: https://jsfiddle.net/yLr5equc/17/
No more !important as I answered above. I created the class .selected for .button and toggle it instead of inserting the style inline.
.button.selected {
background-color: #ccc;
}
I also have refactored the scripts, now shorter and work more effectively.
$(document).ready(function() {
$(".button").on("click", function() {
var $this = $(this),
$next = $(this).next(".slide");
if($next.hasClass("opening")) {
$this.removeClass("selected");
$next.slideUp("fast").removeClass("opening");
} else {
$this.addClass("selected");
$this.siblings().removeClass("selected");
$next.slideDown("fast").addClass("opening");
$next.siblings(".slide").slideUp("fast").removeClass("opening");
}
});
});

remove the inherited CSS value?

I'm trying to remove the value of an inherited CSS property using Jquery.
.class1 #id1 div.class2 input.class-input{
border-color: #bbb3b9 #c7c1c6 #c7c1c6;
}
Anyone tell me how to remove this "border-color".
Thank.

Create a new class for example
.new_class{
border-color: #00ffdd !important;
}
!important does the trick!
Check this

You can use jQuery, but you'll have to assign a value to the border-color property. You can use transparent though:
$('.class-input').css('border-color', 'transparent');
Edit: Or you can disable the whole border:
$('.class-input').css('border', 'none');

You can either swap the on your div to change the color, or set the border color to empty using
$(".class1").css("border-color", "");
But I would recommend swapping out the class using the removeClass and addClass JQuery functions.

If you still want to keep the width of the border:
border-color: transparent;
If you want to remove the border all together
border: 0;
Edit: border: none; will give your the same result
So your jquery could look something like this:
$(".class-input").css("border","0");
However I would suggest using CSS if you don't need to make it animated. Since you raised the concern about .class1 #id1 div.class2 input.class-input.myclass (I'm assuming that's what you mean since you wouldn't be throwing a div into an input box.
You can use the CSS pseudo-selector :not
.class1 #id1 div.class2 input.class-input:not(.my-class){
border: 0;
}

The simplest way to handle this is to add another reference to give your override code a higher specificity.
.class1 #id1 div.class2 input.class-input [#MyNewID]{
border: none;
}
This removes the border for the area where you have added the ID so that if you are using this same format in other pages you can add an additional ID on the element on the page where you want the border to "disappear"
Please don't use !important this is a lazy way to override code and is not necessary 95% of the time. It will also cause you problem later when you are trying to change this if you are pushing down site wide skins.

Disable html input element by applying custom css class

I want to disable my all input element of a div by applying my custom css class.
but i could not find any css attribute which can disable an input element.
currently what am i doing
$('#div_sercvice_detail :input').attr('disabled', true);
$('#retention_interval_div :input').addClass("disabled");
which can disable all input element of div with css attr but i want to apply my custom class for disable all input with some extra css attributes
$('#retention_interval_div :input').addClass("disabled");
class
.disabled{
color : darkGray;
font-style: italic;
/*property for disable input element like*/
/*disabled:true; */
}
any suggestion for doing this with jquery without using .attr('disabled', true);?

There is no way to disable an element with just CSS, but you can create a style that will be applied to disabled elements:
<style>
#retention_interval_div​​ input[type="text"]:disabled {
color : darkGray;
font-style: italic;
}​
</style>
Then in your code you just have to say:
$('#retention_interval_div :input').prop("disabled", true);
Demo: http://jsfiddle.net/nnnnnn/DhgMq/
(Of course, the :disabled CSS selector isn't supported in old browsers.)
Note that if you're using jQuery version >= 1.6 you should use .prop() instead of .attr() to change the disabled state.
The code you showed is not disabling the same elements that it applies the class to - the selectors are different. If that's just a typo then you can simplify it to one line:
$('#retention_interval_div :input').addClass("disabled").attr('disabled', true);

You can use following css to practically disable the input:
pointer-events: none;

Using normal CSS
.disabled{
opacity: 0.6;
cursor: not-allowed;
pointer-events: none;
}

No. CSS can't disable an input element. CSS is for styling only, it can't do anything else. Also, input will only work with input, don't forget select, textarea, password

You need to do 2 things, so why not wrap them in a single function? You could even create a little plugin to do this:
(function ($) {
$.fn.disableInput = function () {
return this.each(function(){
$(this).prop('disabled');
$(this).addClass('disabled', true);
});
}
})(jQuery);
Then you can call it like this:
$('#myInput').disableInput();
...and even chain it with other stuff, like this:
$('#myInput').disableInput().addClass('otherClass');​

You can't disable input elements using css properties. But you can improve your current coding like following
$('#div_sercvice_detail :input').prop('disabled',true).addClass("disabled");

Setting the background colour of zebra-striped table rows

I am using:
tr:nth-child(2n+1) {
background-color: #DDDDDD;
}
To zebra-stripe a table. I have the class:
.redbg {
background-color: #FF6666;
}
And am using:
$(this).parent().parent().addClass("redbg");
To use JQuery to change the background colour of the rows when I need to.
Unfortunatly, it only works on the non-2n+1 rows. How do I recolour the #DDDDDD rows?

Simply change the "redbg" class to add the tr to the front:
tr.redbg {
background-color: #FF6666;
}
This occurs because tr:nth-child(2n+1) is more specific than .redbg so it overrides the background color no matter what. Changing it to tr.redbg makes it just as specific so the "redbg" class will override the :nth-child() selector.
See the jsFiddle
Note for future reference: The tr.redbg selector has to be defined after the tr:nth-child(2n+1) selector in order for it to override the background color.

It seems like that might have something to do with the rules of CSS specificity.
Try changing your selector to tr.redbg and see if that works.

Don't use !important (as another answer suggests)
Instead, make your selector more specific. Add add something like
table tr.redbg { background-color: #FF6666; }
Here's a great link on calculating CSS specificity.

I think you need to make your redbg class more explicit than the nth child to override it.
Maybe something like (though I haven't tested it, but should get you started):
.redbg, tr.redbg:nth-child(2n+1)
{
background-color: #FF6666;
}

Something about tr:nth-child(2n+1) taking priority because it is more specific selector.
Change the other one to
tr.redbg {
background-color: #FF6666;
}
and it shoudl work

How to add a:hover rule in js function?

I modified some jQuery slide gallery for my website. And I want to add .nav li a:hover{color:#00f;} in css, but it didn't work. I checked it in firebug, the css rule is be crossed off. I find something in the jquery slide galley's js file,like this:
function init(){
g.find(".nav").children("li").css("margin","0").css("padding","5px");
g.find(".nav").children("li").children("a").css("text-decoration","none").css("display","block");
}
Is it should be add the a:hover css rule in the js files? How to add it? Thanks.

You can do this in JS with
g.find(".nav").children("li").children("a").hover(
function() {
$(this).css('color', '#00f');
},
function() {
$(this).css('color', '#000');
}
);
You could also modify the plugin stylesheet so you wouldn't have to override it.

It becomes a mess after a while, but you can give CSS directives precedence over subsequent directives using !important.
.nav li a:hover{ color:#00f !important; }
Since you mention the property being crossed off in firebug, I suspect this is your issue.