Develop Reference

click then unclick jquery button not working

I'm trying to make a button which on one click it changes it's color, and on another click it returns to it's original form.
something like clicked and unclicked.
I added a JSfiddle for you to look at it.
https://jsfiddle.net/dw5y5xLx/3/
$('.genM').click(function() {
$('.genM').removeClass('selected');
$(this).addClass('selected');
});
thanks!
also, is there a way doing that by only using CSS HTML?
Thanks.

$('.genM').click(function() {
$(this).toggleClass('selected');
});
I have updated the js fiddle for you, please check (https://jsfiddle.net/dw5y5xLx/15/)!

jQuery hasClass function can be helpful
$('.genM').click(function() {
if($(this).hasClass('selected')){
$(this).removeClass('selected');
}else{
$(this).addClass('selected');
}
});

IDEA:
Is there a way doing that by only using CSS HTML?
Yes, there is a way how u could achieve that just by pure CSS and HTML. But, if you dont want to use js, you must have an HTML element that is able to keep the "pressed" or "unpressed" state all by itself, without js.
However, there is no such an HTML element, so you have to use something simmilar: Checkbox
<input type="checkbox"> have "checked" and "unchecked" state and it is practicaly the same as "pressed" or "unpressed".
SOLUTION:
The trick is to stylize the ckeckbox with CSS so it visually appears as a pressed or unpressed button. Here is an example how checkbox can be stylised - you need to modify the CSS in order to appear it like a button, not a toggle switch!
You will want to use CSS selectors like this (as shown in example):
input[type="checkbox"]:checked { ... },
input[type="checkbox"]:checked + .slider { ... },

jQuery :hover selector [duplicate]

I need to define a div's background color on :hover with jQuery, but the following doesn't seem to work:
$(".myclass:hover div").css("background-color","red");
How can I get the same result? It's important that it has to be done with jQuery but for some reason it doesn't work. Any suggestions? Thanks!

I would suggest to use CSS over jquery ( if possible) otherwise you can use something like this
$("div.myclass").hover(function() {
$(this).css("background-color","red")
});
You can change your selector as per your need.
As commented by #A.Wolff, If you want to use this hover effect to multiple classes, you can use it like this
$(".myclass, .myclass2").hover(function(e) {
$(this).css("background-color",e.type === "mouseenter"?"red":"transparent")
})
Js Fiddle Demo

You can try this:
$(".myclass").mouseover(function() {
$(this).find(" > div").css("background-color","red");
}).mouseout(function() {
$(this).find(" > div").css("background-color","transparent");
});
DEMO

I know this has an accepted answer but if anyone comes upon this, my solution may help.
I found this question because I have a use-case where I wanted to turn off the :hover state for elements individually. Since there is no way to do this in the DOM, another good way to do it is to define a class in CSS that overrides the hover state.
For instance, the css:
.nohover:hover {
color: black !important;
}
Then with jQuery:
$("#elm").addClass("nohover");
With this method, you can override as many DOM elements as you would like without binding tons of onHover events.

Well, you can't add styling using pseudo selectors like :hover, :after, :nth-child, or anything like that using jQuery.
If you want to add a CSS rule like that you have to create a <style> element and add that :hover rule to it just like you would in CSS. Then you would have to add that <style> element to the page.
Using the .hover function seems to be more appropriate if you can't just add the css to a stylesheet, but if you insist you can do:
$('head').append('<style>.myclass:hover div {background-color : red;}</style>')
If you want to read more on adding CSS with javascript you can check out
one of David Walsh's Blog posts.

Use JQuery Hover to add/remove class or style on Hover:
$( "mah div" ).hover(
function() {
$( this ).css("background-color","red");
}, function() {
$( this ).css("background-color",""); //to remove property set it to ''
}
);

It's too late, however the best example, how to add pseudo element in jQuery style
$(document).ready(function(){
$("a.dummy").css({"background":"#003d79","color":"#fff","padding": "5px 10px","border-radius": "3px","text-decoration":"none"});
$("a.dummy").hover(function() {
$(this).css("background-color","#0670c9")
}).mouseout(function(){
$(this).css({"background-color":"#003d79",});
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.1/jquery.min.js"></script>
<a class="dummy" href="javascript:void()">Just Link</a>

JavaScript: How can I change the class of a div by clicking another div?

I want to make a div appear when I click on another div. I was thinking of doing this by using JavaScript to change the class of the div when the other div is clicked on.
This is the HTML of the div I want to appear:
<div id="menutext1" class="hidden"></div>
This is the HTML of the control div (the one to click on to make the above div appear):
<div id="menu1"></div>
This is the CSS:
.hidden { display: none; }
.unhidden { display: block; }
I've looked everywhere and nothing seems to work for me!
I don't have much experience with JavaScript or JQuery but I can understand it.
Thanks in advance :))

.addClass(), .removeClass() should do what you need. .toggleClass() might also be useful. You want to do something like this in your onClick() method:
$('#menu1').click(function() {
$('#menutext1').addClass('unhidden')
});
Swap in toggleClass() if you want to be able to hide/unhide. I should add that these are JQuery functions so make sure to include JQuery in your project.

You have several options to achieve this:
$('#menu1').on('click', function(){
$('#menutext1').show();
// OR
$('#menutext1').toggleClass('hidden unhidden');
// OR
$('#menutext1').removeClass('hidden ').addClass('unhidden');
});
Demo
Note: When working with jQuery and DOM-Manipulation have a look at the .ready() function.
Reference
.on()
.toggleClass()
.removeClass()
.addClass()
.show()

You can do it without JQuery using the classList.toggle method. And you don't really need the unhidden class. When the hidden class is toggled off, the div should return to its default display (block).
// get the element you want to click on
var controlDiv = document.getElementById('menu1');
// assign a function to run when it is clicked
controlDiv.addEventListener('click', function() {
// turn the hidden class off or on
document.getElementById('menutext1').classList.toggle('hidden');
});

Using javascript on multiple Div Id's

I have created an expanding div that hides on load and expands when clicked using javascript and jQuery. My problem is that I need to use this feature multiple times on each page (10-30x). Is there a way to call the function to work with multiple Div ids using an array or something of that nature (I am a newbie, my apologies), e.g. a few of my div ids would be eb1, eb2, eb3, eb4. and here is my script that currently works on one id:
<script type="text/javascript">
jQuery(document).ready(function() {
jQuery('#eb1').hide();
//hides box at the begining
jQuery("#hide").click(function() {
jQuery('#eb1').fadeOut(300);
//jQuery('#the_box').hide();
});
jQuery("#show").click(function() {
jQuery('#eb1').fadeIn(300);
//jQuery('#the_box').show();
});
});
</script>
Any help would be appreciated, even a link to an explanation.
Thanks,
Travis

Further to John Conde's answer this is also possible using attribute-starts-with:
jQuery('div[id^="eb"]').hide();
JS Fiddle demo.
It is, of course, easier to just use a particular class-name, and the selector then becomes:
jQuery('.className').hide();
JS Fiddle demo.
References:
Attribute-starts-with ([attribute^="value"]) selector.

You should be able to do this by separating the ids with a comma:
jQuery('#eb1','#eb2','#eb3').hide();

just type "jquery multiple div show hide" into google:
the first link gives this:
Show/Hide Multiple Divs with Jquery
:)

Maybe it is cleaner to add a css class to all the div (or whatever tag you use) elements that should behave like that, then use that class in the selector ?
jQuery('div.hidable').hide();
//hides all 'hidable' boxes
jQuery("#hide").click(function() {
jQuery('div.hidable').fadeOut(300);
});
etc...

You could create a function to do that.
let me explain
function ToogleDiv(container){
// simple toogle
$(container).toggle();
// a toogle with some effect
$(container).toggle('slow', function() {
// add some action }); }
here's is a Jquery example Toogle Jquery Example
Hope this helps.

You can use Attribute Starts With Selector [name^="value"]
var divs = $('div[id^="eb"]');
$(divs).hide();
$('#show').click(function(){
$(divs).show();
});
$('#hide').click(function(){
$(divs).hide();
});
Live example on JSFiddle

function show(var id){
jQuery(id).fadeIn(300);
}
function hide(var id){
jQuery(id).fadeOut(300);
}
and then, in your divs:
<a id="hide" onClick="hide('eb1')">hide</a>
<a id="show" onClick="show('eb1')">show</a>
<div id="eb1"></div>

Jquery problem onclick add class and remove class

first time posting here. I'm a beginner in jquery and i ran into some grey area. Hopefully i can find my answer here and learn from it also :)
So i have a let's say 10 different div. All has the same class. And everytime I click on the div it has to add another class (in this case background-color in css). For that I have this:
$(document).ready(function() {
$(".menucardmenu").click(function(){
if($(this).hasClass("menucardmenu")) {
$(this).addClass("backgroundmenucard");
}
else {
alert ("condition false");
}
});
});
But the question now is, how can i make that only one div can have that background-color (in my case backgroundmenucard). Depending one which div the user click, that div will have the background-color, and the previous div (that was clicked) should reset it back to normal. I can do it with this right?:
$(this).removeClass("backgroundmenucard");
does anyone know the answer to this???
Regards,
Andrew

try the following:
$(".menucardmenu").click(function(){
$(".backgroundmenucard").removeClass("backgroundmenucard");
$(this).addClass("backgroundmenucard");
});
Demo: http://jsfiddle.net/r2Sua/
(I remove the if because it's useless in this case)

Remove from all...
$(".menucardmenu").removeClass("backgroundmenucard");
Then add to this

$(function() // shorthand for document ready
{
var $divs = $('div.menucardmenu'), // standard jQuery "cache" idiom
BG_CLASS = 'backgroundmenucard'; // stay DRY, less prone to typos
$divs.live('click', function() // use .live to bind only 1 event listener
{
// remove the class from all divs
$divs.removeClass(BG_CLASS);
// add the class to this div
$(this).addClass(BG_CLASS);
}
});
});
The if($(this).hasClass("menucardmenu")) check is completely unnecessary since you're already selecting elements which have that class. It will always evaluate to true.

$('.menucardmenu').click(function(){
$('.menucardmenu').removeClass('backgroundmenucard');
$(this).addClass('backgroundmenucard');
});

Another option would be:
$(".menucardmenu").not(this).removeClass("backgroundmenucard");
$(this).addClass("backgroundmenucard");
This way you don't remove and add the class to the specific (this) element