Develop Reference

Can I use a condition inside a toggleClass based on the toggle status

I am creating a toggle and need to execute a command based on the toggle status.
When I click .flip1 first time it adds the flipped class to .card1.
I also want it to show an alert "flipped added"
When I click it again it removes the flipped class and I want it to show an alert "flipped removed".
I imagine that the code will look something like this:
$(document).ready(function () {
$('.flip1').click(function () {
$('.card1').toggleClass('flipped');
if ("class added"){
alert("flipped added");
}
if ("class removed"){
alert("flipped removed");
}
});
});
Is there something I can put in the if to know whether the toggle is true or false?

This can be achieved via jQuery's hasClass() method like so:
$(document).ready(function() {
$('.flip1').click(function() {
$('.card1').toggleClass('flipped');
// use hasClass to see if .card1 has .flipped class now applied.
// if true, that indicates it was just added
if ($('.card1').hasClass('flipped')) {
alert("flipped added");
} else {
alert("flipped removed");
}
}
);
});
.flipped {
background:yellow;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.0.2/jquery.min.js"></script>
<div class="card1">
Card1 (yellow if flipped)
</div>
<a href="#" class="flip1">
Flip1
</a>

You can use addClass() and .removeClass() to change class and .hasClass() to check the state.
Here is your code :
$(document).ready(function () {
$('.flip1').on('click', function () {
if ( $('.card1').hasClass('flipped') ) {
$('.card1').removeClass('flipped');
alert("flipped removed");
} else {
$('.card1').addClass('flipped');
alert("flipped added");
}
});
});

$(document).ready(function () {
$('.flip1').on('click', function () {
if ( $('.card1').hasClass('flipped') ) {
$('.card1').removeClass('flipped');
alert("flipped removed");
}
else {
$('.card1').addClass('flipped');
alert("flipped added");
}
});
});

Use the same button to trigger two different JQuery events

I am trying to use the same button to trigger an ajax call to add a database entry if it is clicked and then trigger a different ajax call to remove the entry it is clicked again.
I have tried using toggleClass and although the button class does change and it's appearance changes accordingly the function still thinks it has the old class name.
$(document).ready(function() {
$(".selected").on("click", function() {
$(this).text(function (i, oldText) {
return $.trim(oldText) == 'Use Image' ? 'Selected' : 'Use Image';
});
$(this).toggleClass('selected selected_btn');
});
$(".selected").on("click", function() {
alert('selected');
});
$(".selected_btn").on("click", function() {
alert('de selected');
});
});
With the present code the alert is always 'selected'.

$(document).ready(function() {
$(".selected_btn").on("click", function() {
$(this).text(function (i, oldText) {
return $.trim(oldText) == 'Use Image' ? 'Selected' : 'Use Image';
});
$(this).toggleClass('selected');
if($(this).hasClass("selected"))
alert("Selected")
else
alert("de-Selected")
});
});
here is a fiddle:
http://fiddle.jshell.net/prollygeek/3LLN2/

Here is a simple and readable example on how to do this:
$(document).ready(function() {
$('.select-img').on('click', function(){
var $el = $(this);
var isSelected = $el.attr('data-selected');
if( isSelected != 'true' ){
firstFn();
$el.html('Use Image').attr('data-selected', true)
}else{
secondFn();
$el.html('Select').attr('data-selected', false)
}
})
var firstFn = function(){
alert('first thing to do');
}
var secondFn = function(){
alert('second thing to do');
}
})
Demo

Use *Class functions:
hasClass
removeClass
addClass
Working code:
$("a").on("click", function() {
if($(this).hasClass("bob")) {
// do delete
alert("delete");
$(this).removeClass("bob");
} else {
// do insert
alert("insert");
$(this).addClass("bob");
}
});
Demo

$(".selected").on("click", function() {
alert('selected');
});
Overrides the event you put on the beginning of the document.ready, I think.
(might not be true, but I think it is)

Javascript toggle menu collapsed issue

I have created a Javascript toggle menu:
$(document).ready(function() {
$('.toggle').click(function () {
if ($(this).hasClass("expanded")) {
$(this).next().slideUp("fast");
} else {
$('.toggle').next().slideUp("fast").removeClass("expanded");
$(this).next().slideDown("fast");
$(this).removeClass("collapsed");
$(this).addClass("expanded");
}
});
});
When I click on another item in the menu, the class "expanded" is not removed from the other elements. I've tried many different things but can't get my head around it. Any help would be appreciated.

$(document).ready(function() {
$('.toggle').click(function () {
if ($(this).hasClass("expanded")) {
$(this).next().slideUp("fast");
$(this).addClass('collapsed');
$(this).removeClass('expanded');
} else {
var $expandedItems = $('.expanded');
$expandedItems.next().slideUp("fast")
$expandedItems.addClass('collapsed');
$expandedItems.removeClass('expanded');
$(this).next().slideDown("fast");
$(this).removeClass("collapsed");
$(this).addClass("expanded");
}
});
});
Based on your comments I think you are after something like this.

$(document).ready(function() {
$('.toggle').click(function () {
if ($(this).hasClass("expanded")) {
$(this).next().slideUp("fast");
} else {
$('.expanded').removeClass('expanded');//here is your problem
$(this).next().slideDown("fast");
$(this).removeClass("collapsed");
$(this).addClass("expanded");
}
});
});
This should be remove expanded class from your jquery code
Note Tested although please tell me if its not working
updated
Demo
And for jquery i think you are missing too much information here check demo here Demo

Change the css based on select value item using jquery

Fiddle
i have a jquery which is for that, if the selected value is "<>"(Between) i want to change the style to display:block to an input box .. but here all the selected items css is changed
$(document).ready(function () {
$('.condition-change').change(function () {
if ($('select[name="SearchCondition"]').find('option[value="<>"]').attr("selected", true)) {
$('.second-value').css("display", "block");
}
});
});

Wrong condition
$(document).ready(function () {
$('.condition-change').change(function () {
if($('select[name="SearchCondition"]').find('option[value="<>"]').prop("selected")==true)
{
$('.second-value').css("display", "block");
}
});
});

You simply need to access the selected option value which you can get using val(), so put condition on val(),
Live Demo
$(document).ready(function () {
$('.condition-change').change(function () {
if ($(this).val() == "<>") {
$('.second-value').css("display", "block");
}
});
});
Also using show and hide instead of setting css.
Live Demo
$(document).ready(function () {
$('.condition-change').change(function () {
if ($(this).val() == "<>")
$('.second-value').show();
else
$('.second-value').hide();
});
});

Try,
$('.condition-change').change(function () {
if($(this).val().trim() === '<>') {
$('.second-value').show();
}
});
DEMO
Or
$('.condition-change').change(function () {
$('.second-value').toggle($(this).val().trim() === '<>');
});
DEMO I

// add .is(":checked") function to check whether "<>" value option is selected
$(document).ready(function () {
$('.condition-change').change(function () {
if($('select[name="SearchCondition"]').find('option[value="<>"]').is(":checked"))
{
$('.second-value').css("display", "block");
}
else
{
$('.second-value').css("display", "none");
}
});
});

On hover and on click function / Jquery

I posted a question few hours back but my example was not perfect to understand.
So here it goes.
I have two big boxes. On hover each of the big red box, the small black box should change it's bg color.When you click on each big box then the small box color should change as well.On mouse enter and out it's working fine. But onclick it's not working. I tried with bind/unbind but didn't work.
Jquery:
$('.libg').click(function () {
$('.imagebg').removeClass('active');
$(this).find('.imagebg').addClass('active');
}).hover(
function () {
$(this).find('.imagebg').addClass('active');
},
function () {
$(this).find('.imagebg').removeClass('active');
});
Jsfiddle is http://jsfiddle.net/squidraj/kdZ8J/2/
Please advice. Thanks.

You have two conflicting lines of code:
$('.imagebg').removeClass('active');
$(this).find('.imagebg').addClass('active');
The first line will remove the class, and the second will add the class right back to the element.
http://jsfiddle.net/kdZ8J/4/
$('.libg').click(function () {
var current = $(this).find('.imagebg');
var all = $('.imagebg');
var index = all.index(current);
$('.imagebg').each(function(i) {
if(i != index) {
$(all[i]).removeClass('active');
}
});
if(current.hasClass('active')) {
current.removeClass('active');
} else {
current.addClass('active');
}
}).hover(
function () {
$(this).find('.imagebg').addClass('active');
},
function () {
$(this).find('.imagebg').removeClass('active');
});

I would check each box separately. So I'm going to modify your html code a bit along with some jquery code. http://jsfiddle.net/kdZ8J/15/
Html code:
<ul>
<li class="libg1" id="1">
<div class="imagebg1" id="1a"></div>
</li>
<li class="libg2" id="2">
<div class="imagebg2" id="2a"></div>
</li>
</ul>
Handle click events:
$('#1').click(function () {
//add the click and set active class
$(this).data('clicked', true);
$('#1a').addClass('active');
//remove the click and active class
$('#2').data('clicked', false);
$('#2a').removeClass('active');
})
$('#2').click(function () {
//add the click and set active class
$(this).data('clicked', true);
$('#2a').addClass('active');
//remove the click and active class
$('#1').data('clicked', false);
$('#1a').removeClass('active');
})
First Rectugular Hovering code:
$('.libg1').hover(function () {
if($(this).data('clicked')) {
//check if active class exists
if($('.active').size()){
$('#1a').removeClass('active');
}
else{
$('#1a').addClass('active');
}
}
else{
$('#1a').addClass('active');
}
},function () {
if($(this).data('clicked')) {
$('#1a').addClass('active');
}
else{
$('#1a').removeClass('active');
}
});
Second Rectangular Hoving code:
$('.libg2').hover(function () {
if($(this).data('clicked')) {
//check if active class exists
if($('.active').size()){
$('#2a').removeClass('active');
}
else{
$('#2a').addClass('active');
}
}
else{
$('#2a').addClass('active');
}
},function () {
if($(this).data('clicked')) {
$('#2a').addClass('active');
}
else{
$('#2a').removeClass('active');
}
});