Develop Reference

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');
});

Need help manipulating class with jquery

I need help with this code:
$(document).ready(function() {
$(".fav").click(function() {
$(".fav").removeClass("fav").addClass("fav_");
});
$(".fav_").click(function() {
$(".fav_").removeClass("fav_").addClass("fav");
});
});
On click in .fav div, he transforms to .fav_ and vice-versa. Ok, but the problem is:
If you click one time to .fav class, he transform to .fav_. But if you click one time more, he don't transform again to .fav.
I tried put one var to check. ex:
if clicked one time: fav=true
if clicked two times: fav=false
but it doesn't work.
I understand jQuery, but my usual language is PHP, perhaps thence the difficulty.

You need to keep a reference to the DOM elements in a variable, and use that. This way you don't have to perform the jQuery selector again.
$(document).ready(function() {
var favs = $(".fav");
favs.click(function() {
favs.toggleClass("fav");
favs.toggleClass("fav_");
});
});
You can also use the toggleClass() method to add/remove the classes. If it tests with fav then it should toggle back and forward between fav and fav_. So there is no need for IF statements.
EDIT:
If you want to toggle the showing of the background image, then you don't have to remove the fav CSS class. Just toggle fav_ as it's background will override fav because it's lower in the CSS source.
$(document).ready(function(){
$(".fav").click(function(){
$(this).toggleClass("fav_");
});
});

alert javascript generated div id

I've generated some divs with .append() method.
Code looks like that:
$("#someDiv").prepend("<div id='someId' class='myClass'></div>"):
$("#someDiv").prepend("<div id='someId2' class='myClass'></div>"):
that works great, now, i want to use that divs id's.
i'm trying to do it this way:
$(".myClass").click(function(){
alert($(this).attr('id'));
})
but, it does not work, help me please.

If the elements are dynamically generated, you probably need to delegate the event to an element that actually exists when binding the handler, something like:
$(function() {
$("#someDiv").on("click", ".myClass", function(){
alert(this.id);
});
});
And you'll need to replace the colon on the end of you're prepends with a semicolon to make those work.
FIDDLE

The problem maybe because you are binding the click event to "myClass" before actually adding the divs. Try placing the click event code after the code for adding new divs like this
$("#someDiv").prepend("<div id='someId' class='myClass'></div>"):
$("#someDiv").prepend("<div id='someId2' class='myClass'></div>"):
$(".myClass").click(function(){
alert($(this).attr('id'));
})

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