Develop Reference

jQuery Add css and remove it after click event

Hy guys, I would like to know how remove css styles after click event,
In fact at the first click I add css and remove some other things but I would like at the second click get the same css code at the beginning.
$('#show').click(function (){
$('.sub-menu').css('width', '185px');
$('.sub-menu').css('-webkit-transform', 'none');
$('.sub-menu').css('transform', 'none');
// and second click
$('.sub-menu').css('width', '');
$('.sub-menu').css('-webkit-transform', 'scale(0)');
$('.sub-menu').css('transform', 'scale(0)');
})
I don't want use toggleclass method cuz I don't want touch the css file.
Thanks.

A very simple option is to keep some kind of boolean marker.
var applied = false;
$('#show').click(function() {
if (!applied) {
$('.sub-menu').css('width', '185px');
$('.sub-menu').css('-webkit-transform', 'none');
$('.sub-menu').css('transform', 'none');
applied = true;
} else { // and second click
$('.sub-menu').css('width', '');
$('.sub-menu').css('-webkit-transform', 'scale(0)');
$('.sub-menu').css('transform', 'scale(0)');
applied = false;
}
})

You mentioned that you don't want to touch the css file. How about you create a css rule using jQuery and append it to the head tag.
var rule = $('<style>.myclass{width:185px; -webkit-transform:none; transform:none;}</style>');
$('html > head').append(rule);
$('#show').on('click',function(){
$('.sub-menu').toggleClass('myclass');
});

Alternating clicks

http://jsfiddle.net/qVfy7/
HTML
<div id='button'></div>
<div id="mydiv">ko</div>
JS
$('#button').click(function () {
$('#mydiv').text('ok');
});
CSS
#button{
width:100px;
height:100px;
background-color:red;
}
On clicking the button, mydiv's text changes. What I want to do, is clicking again on it to change the text back to ko, and so on, alternating between the two values. Is there a way to do that?

Sure, just check what the text is, and return the other value to the text() method
$('#button').click(function () {
$('#mydiv').text(function(_, txt) {
return txt == 'ok' ? 'ko' : 'ok';
});
});
FIDDLE

There are multiple ways, but one them is, make an if-else:
$('#button').click(function () {
if($('#mydiv').text()=="ko")
$('#mydiv').text('ok');
else
$('#mydiv').text('ko');
});
DEMO

Jquery If/Then in Click Function?

This is what I want it to do...
When div called 'bd' is clicked > check if the div with id of 'ump' has a class of 'active' >
if it does, get div with class of 'brandDump' and slide it up slowly, hide it, and remove the class of 'active' > else, take the div with class 'brandDump' and slide it down, show it, and add class of 'active'
Nothing is happening when I click div.bd. What am I doing wrong?
Fiddle link and code below.
http://jsfiddle.net/K2V8f/36/
<div class="bd">cool</div>
<div class="brandDump" id="ump">works</div>
<div>shape</div>
.brandDump {
background-color:#fff;
width:100px;
display:none;
}
.bd {
width:100px;
height:100px;
background-color:#000;
}
$(".bd").click(function () {
if ("#ump".hasClass("active")) {
$(".brandDump").slideUp("slow");
$(".brandDump").hide();
$(".brandDump").removeClass("active");
} else {
$(".brandDump").slideDown("slow");
$(".brandDump").show();
$(".brandDump").addClass("active");
}
});

Updated fiddle
You need to use callbacks when the slideUp finishes.
$(".bd").click(function () {
if ($("#ump").hasClass("active")) {
$(".brandDump").slideUp("slow", function () {
$(".brandDump").removeClass("active");
});
} else {
$(".brandDump").slideDown("slow", function () {
$(".brandDump").addClass("active");
});
}
});
Also there was an error with ("#ump")... should have been $("#ump")

The problem is that you had:
"#ump".hasClass(...
...when you should've had:
$("#ump").hasClass(...
But note also that the .slideUp() and .slideDown() methods hide and show your element(s) so you don't need to call .hide() and .show() as well. Also it is more efficient to chain jQuery methods together if you want them to operate on the same element:
$(".bd").click(function () {
if ($("#ump").hasClass("active")) {
$(".brandDump").slideUp("slow")
.removeClass("active");
} else {
$(".brandDump").slideDown("slow")
.addClass("active");
}
});
Demo: http://jsfiddle.net/K2V8f/50/
"check if the div with id of 'ump' has a class of 'active' > if it does, get div with class of 'brandDump' and slide it up slowly"
The div with id ump is the same div as the one with class brandDump. I'm not sure why you're talking about them as if they're two different divs when in fact your code seems to then use the #ump and .brandDump selectors interchangeably to select the one div, but if you treat them as one more consistently you can cut your function down to one line:
$(".bd").click(function () {
$(".brandDump").slideToggle("slow").toggleClass("active");
});
Demo: http://jsfiddle.net/K2V8f/51/

fold div on click

I want to fold down the div onclick event and on another click want to fold up the div
my jquery is following
$(".fold_reply").click(function() {
if ($('.reply').css('display', 'none')) {
$(".reply").show("fold", {}, 500);
}
else {
$(".reply").hide("fold", {}, 500);
}
});​
and the div I want to fold is having display:none at the initial point
In My reply tag
< div class="reply" style="display:none; " > at the initial reply is not shown
so when I click then div is fold down but on other div it is not fold up
Please help me

$(".fold_reply").click(function() {
$(".reply").toggle(500)
}
Toggle will show or hide the element depending on its current state, eliminating your if block.
Check this fiddle out for an example:
http://jsfiddle.net/z9rGz/3/

yes #levib answer is short and correct one to use. Another alternative is that you can use slideUp() and slideDown() functions.
$(".fold_reply").click(function() {
if ($('.reply').css('display', 'none')) {
$(".reply").slideDown("slow");
}
else {
$(".reply").slideUp("fast");
}
});​

You should use the jquery .toggle or jquery UI .toggle method which does just that.
But the error in your logic is the $('.reply').css('display', 'none'). This sets the display to none. It does not check if it is none...
If you had to use that code you should change it to
if ( $('.reply').css('display') === 'none') )

Use the jQueryUI version of toggle() since you seem to be using a jQuery UI effect
.toggle( effect [, options ] [, duration ] [, complete ] )
Reference: http://api.jqueryui.com/toggle/
$(".fold_reply").click(function() {
$(".reply").toggle("fold", 500);
})

$(".fold_reply").click(function() {
var style=$('.reply').css('display');
if (style=='none') {
$(".reply").show(500);
}
else {
$(".reply").hide(500);
}
});​
<input type="button" class='fold_reply' value="button">
<div class='reply'>
text<br/>text<br/>text<br/>text<br/>text
</div>​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​
Working Demo

jQuery text() change on toggle()?

I want to make a script that is changing toggle link text depending on others element visibility.
So while #form is visible I want the #form-container a text to be "Hide...", and while it's hidden I want the text to be "Show...".
I've tried this line - if($('#form').is(":visible")){ another way: if($('#form').is(":visible") == "true"){ - but it also doesn't work.
What's wrong? How to change text every time another item is toggled?
$('.toggle').click(
function()
{
$('#form').slideToggle();
if($('#form').is(":visible")){
$('#form-container a').text("Hide form container");
}
else {
$('#form-container a').text("Show form container");
}
});
Thanks.

It'll always be visible while animating, you can check the visibility in the .slideToggle() callback so it checks when it finishes animating, like this:
$('.toggle').click(function() {
$('#form').slideToggle(function() {
$('#form-container a').text(
$(this).is(':visible') ? "Hide form container" : "Show form container"
);
});
});

You can use toggle on the form element.
$("#form").slideToggle(
function () {
//Hide
},
function () {
//Show
}
);
source: http://api.jquery.com/toggle/