We Keep Coding

How to toggle between CSS changes

I have a button that when pressed hides a div using 'Display: None;'.
How do I write in jquery to make the css property toggle between Display: None and Display: Block?
$('#help_btn').click(function(){
$('#help_box').css('display', 'none');
});
when you click it again
$('#help_box').css('display', 'block');
so on and so forth. Thanks!
edit:
My css would look like this
#help_box {
display: block;
}
and my html is
<div id='help_box><p> Some helpful info!</p></div>
<button id='help_btn>help?</button>

You could toggle CSS classes as commented by #showdev. Or you could try this
$('#help_btn').click(function() {
if($('#help_box').is(':visible')) {
$('#help_box').css('display', 'none');
} else {
$('#help_box').css('display', 'inline');
}
});

Use toggleClass(); as other answers suggest or use toggle();
$('#help_btn').click(function(){
$('#help_box').toggle();
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="help_box"><p> Some helpful info!</p></div>
<button id="help_btn">help?</button>
Note that you have typo in your html code, you've got to properly double-quote id of your elements.

You can use toggleClass() to toggle two classes.
ToggleClass logic is that we add the missing class and we remove the previous one.
$('#help_btn').click(function(){
$('#help_box').toggleClass("hidden shown");
});
.shown { display: inline; }
.hidden { display: none; }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button id="help_btn">Change</button>
<div id="help_box"><p> Some helpful info!</p></div>

Create any class
.someclass{ display: inline}
Then toggle class
$('#help_btn').click(function(){
$('#help_box').toggleClass("someClass");
});

There are two common ways:
The first one is by checking the css property and reversing it, something like this:
$(".something-i-clicked").on("click", function() {
if($(".my-class").css("display") == "none") { // if display: none; is set to .my-class
// reverse it to display: block;
$(".my-class").css("display", "block");
} else { // it has display: block;
// reverse it to display: none;
$(".my-class").css("display", "none");
}
})
The second way is by toggling a modifier css class, maybe like this:
// my_css_file.css
.my-class {
display: none;
}
.d-block {
display: block;
}
// my_js_file.js
$(".something-i-clicked").on("click", function() {
// toggle the class
$(".my-class").toggleClass("d-block");
})

how to remove a CSS property using jquery

How can I remove( not set null) a CSS property from a class? Here I have a class named myclass it contains the property right:0px. I am trying to remove right:0px from my class(not trying to set null). How can I make it possible?
.myclass{
position:fixed;
right:0px;
}

You can do following way using JQuery. It will set initial value of right.
$('.myclass').css({ 'right' : 'initial' });
.myclass{
position:fixed;
right:0px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="myclass">
test
</div>

You should not change the initial css, because it's already included. What you could do is add a new css class and reset the right property:
.myResetClass {
right: auto !important;
}
Then append this class to necessary elements, which will change the right property to default auto:
$('.myclass').addClass('myResetClass');

I'm not sure I've seen jQuery control a CSS declaration like what you want, but from what I've seen that's not the best way to handle it. Instead create these classes:
.myclass1 {position:fixed;}
.myclass2 {right:0px}
and use the two classes in your element like
<input class="myclass1 myclass2" ...
Then when you want to remove the right:0px, all you need to do is to remove the class that handles that:
$('input.myclass1').removeClass('myclass2');
To put it back, use addClass
$('input.myclass1').addClass('myclass2');

As far as I Know, JQuery cannot manipulate CSS rules specified for a particular class. What you can do though is set CSS rules for another class.
.myclass{
position:fixed;
right:0px;
}
.anotherclass{
position:fixed;
}
then using jquery
$(selector).removeClass('myclass').addClass('anotherclass');

You can try using this:
$(".myclass").css({ 'right' : 'inherit' });
If you want to remove inline.. This will be useful

the expect res is .myclass{ position:fixed; }
Try using $("style") selector, .each(), .text(), String.prototype.replace()
$(function() {
$("style").each(function() {
$(this).text(function(_, text) {
return text.replace(/(\.myclass\s+\{\n\s+.+\n\s+.+\n\s+.+\})/g
, function(match, p1) {
var re = match.replace(/right:\s+\d+\w+;\n/g, "");
return re
})
});
console.log(this.textContent)
})
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js">
</script>
<style>
.myclass {
position: fixed;
right: 0px;
}
</style>

Try like this:
$(".myclass").removeAttr("right");

How to delete Pseudo-elements with Jquery

How do I delete pseudo-elements with jquery.
I tried before:
$('.myclass a:after').hide();
and it's not working like that.

You can't modify the pseudo elements directly using scripts, but you can use some workarounds.
One of them is to use a class like
$('button').click(function() {
$('.myclass a').addClass('hide-after');
})
.myclass a:after {
content: '++'
}
.hide-after:after {
display: none
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="myclass">
<a>something</a>
</div>
<button>Test</button>

click to change background toggle

When I click on it changes background. It works fine. But what if I want to click on it again to restore the original background? I have this code:
jQuery(document).ready(function($) {
$(".select").on("click", function () {
$(this).css("background-image", "url(images/selected.png)");
});
});
Here is jsfiddle EXAMPLE
Basically when I click on the div it changes the background, which is fine. But I want to have ability to click on it again to restore the original background.
It will be an alternative solution for tick box, but just for demo purposes.
Thanks

JS
replace
$(this).css("background-image", "url(images/selected.png)");
with
$(this).toggleClass("active");
Style
#multiselect .active {
background-image: url('...');
}
Fiddle http://jsfiddle.net/09xgrhxo/4/

Instead of using .css() to change the background-image I would add a class in your CSS and use .toggleClass().
Also be aware that simply adding a class will not be specific enough because your css is using:
#multiselect .select
you're going to have to target the class you add as a child of #multiselect:
#multiselect .change
CSS
#multiselect .change{
background-image: url(http://t2.gstatic.com/images?q=tbn:ANd9GcSZ51HqKXkejWAFcSBrodHd5eUN2QaIJro0jhN1YpmljSdQ5dj2)
}
JS
$(".select").on("click", function () {
$(this).toggleClass("change");
});
FIDDLE

You could use data-* attribute.
$('.select').attr('data-img', $('.select').css('background-image'));
$(".select").on("click", function() {
$(this).css("background-image", ($(this).css('background-image') == $(this).data('img')) ? "url(http://t2.gstatic.com/images?q=tbn:ANd9GcSZ51HqKXkejWAFcSBrodHd5eUN2QaIJro0jhN1YpmljSdQ5dj2)" : $(this).data('img'));
});
#multiselect .select {
background: url(http://t0.gstatic.com/images?q=tbn:ANd9GcQF_ErOlc78eOGZaEWb-dwPkrv2uyAoKx0Pbn3-e0tAZoUDSQRCsA) center;
width: 250px;
height: 100px;
margin-bottom: 20px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id="multiselect">
<div class="select">Option1</div>
<div class="select">Option2</div>
<div class="select">Option3</div>
</div>

Instead of writing background-img url in javascrpt, I would suggest to create two classes having same properties but different background-img url which you want to toggle. so here we will be toggling class (ultimately background-img) in javascript.
see jsfiddle [example][1]
[1]: http://jsfiddle.net/09xgrhxo/13/

Quick javascript hover question

I have a quick JavaScript question. I was wondering if there's a way to make a div called #post li span to show up (appear) when you hover over the div "#post li" ? It'd mean a lot if someone could provide me with a code.

You can do that directly with CSS:
#post li span {
display: none;
}
#post li:hover span {
display: inline;
}
If you want to use JavaScript and have jQuery, you can use:
$('#post li span').hide();
$('#post li').hover(
function() { $('span', $(this)).show(); },
function() { $('span', $(this)).hide(); }
);
If you want to use JavaScript and don't have jQuery, things start getting more complicated.

In older IE's you won't have access to the :hover pseudo class on none anchor tags. so you can use javascript like this:
$('#post li').hover(function() {
$(this).find('span').show();
},
function() {
$(this).find('span').hide();
}
);
check out jQuery hover for more info on how it works

You can use CSS.
Apply display: none to #post li span, then add display:block for #post li:hover span