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

jQuery set class not working after its already been set

trying to make a simple expanding heading script.
I don't wish to use accordions and just looking for a light weight home made solution. As i enjoy writing and learning things myself.
In my eyes, what i have should work. But it doesnt.
The aim is:
When a heading is clicked, all of the content is hidden and then the next content element after the heading is shown. This prevents more than one content being shown at any time.
After this, the div class gets changed to be a 'selected' state.
This works okay.
However, the next part runs if the heading class is the selected state, and if so it SHOULD change its class back to the normal and also hide the next element content.
The aim is to allow the hide / show options.
The latter part of changing back the class doesnt work however. I also know there is a much for efficient way of writing this, but not sure how.
JS:
$(function() {
$('.headingHelp').click(function(){
$('.infoHelp').fadeOut();
$(this).next('.infoHelp').fadeIn();
$(this).attr('class', 'headingHelp_sel');
});
$('.headingHelp_sel').click(function(){
$(this).next('.infoHelp').fadeOut();
$(this).attr('class', 'headingHelp');
});
});
Example HTML:
<p class="headingHelp">Content Heading</p>
<div class="infoHelp">
Content
</div>
<p class="headingHelp">Content Heading 2</p>
<div class="infoHelp">
Content 2
</div>
JSFiddle: http://jsfiddle.net/C7bHn/1/
Thanks in advance!

Since your "selected" class is added after the DOM is loaded, jQuery is not aware of it.
I suggest using jQuery's on() for delegated events. This will allow you to select dynamically generated classes:
$(document).on('click','.headingHelp',function(){
$('.infoHelp').fadeOut();
$(this).next('.infoHelp').fadeIn();
$(this).attr('class', 'headingHelp_sel');
});
$(document).on('click','.headingHelp_sel',function(){
$(this).next('.infoHelp').fadeOut();
$(this).attr('class', 'headingHelp');
});
Working Example (jsfiddle)
Edit:
Here's another method without using delegation. It just adds/removes a "sel" class rather than changing the class completely.
$('.headingHelp').click(function(){
// save clicked element in a variable for use below
$this=$(this);
// remove / add "selected" class
$('.headingHelp').removeClass('sel');
$this.addClass('sel');
// fade in / out content
$('.infoHelp').fadeOut();
$this.next('.infoHelp').stop().fadeIn();
});
.infoHelp {
display: none;
}
.headingHelp {
background-color:#999;
padding: 1%;
cursor: pointer;
color: white;
}
.headingHelp:hover,
.headingHelp.sel {
background-color:#666;
}
Working Example (jsfiddle)

jQuery selector working "AT CURRENT MOMENT" . Your selector $('.headingHelp_sel') empty when running this code.
Best code:
$(function() {
$('.headingHelp').click(function(){
var open = $(this).next('.infoHelp').is(':visible');
$('.infoHelp').fadeOut();
if(!open)
{
$(this).next('.infoHelp').fadeIn();
}
});
});

cannot show element next to checkbox

I have HTML like so:
<input type="checkbox" class="chk-class" /> Click to enable<br/>
<div class="hidden">Hidden content here</div>
I want to reveal the content when the checkbox is clicked. So here's the JS:
$('.chk-class').bind('click', function(){
$(this).closest('.hidden').show();
});
Why isn't this working?
PS: I do not want to use IDs. I want this to be dynamically assigned as I have multiple checkboxes.

It is the second next sibling from what I can see
$('.chk-class').on('change', function(){
$(this).next().next().toggle();
});
Demo: Fiddle
Another way is(If you are not sure about the elements between the checkbox and hidden)
$('.chk-class').on('change', function () {
$(this).nextUntil('.hidden').last().next().toggle();
});
Demo: Fiddle

closest moves upwards use next
$(this).next().show();
EDIT use nextAll('selector:first') to show just next element with specific class/id etc
$(this).nextAll('.hidden:first').show()

$('.chk-class').change(function(){
$(this).next('.hidden').toggle();
});

First you should hide your hidden div with display: none
.hidden {
display: none;
}
then
$(".chk-class").click(function(){
$(".hidden").css("display","block");
});
http://jsfiddle.net/e5Jvg/

Show element in hiddens elements

HTML
<body>
<span>test</span>
<span>test</span>
<span>test</span>
<span id="show">aaaaaa</span>
</body>
JS
$('body').hide();
$('#show').show();
Why doesn't this work? How can I make it work?
Now all is hidden, but if I use $('#show').show(); it should make #show visible. Is this possible? If yes, how?
I want hide all elements without #show, but I can't modify the HTML.

Because #show is inside body, which is not visible.
body defines the document's body and it contains all your elements, so if you hide it you'll hide all your elements.
Try to hide just the elements you want to.

By setting display: none on the document.body (that is what .hide() basically does), the second call to #show becomes pretty much irrelevant, because the parent is still hidden (body).
You would need to select all elements, without the specific node and hide those.
$(document.body).contents().not('#show, #show *').hide();

To hide all elements without id="show", you can use the not function:
$('body').find('*').not('#show').hide();
or the :not psuedoselector:
$('body').find(':not("#show")').hide();
Edit: to also show all children of #show, add that to the not selector:
$('body').find('*').not('#show, #show > *').hide();​
http://jsfiddle.net/ZD7gm/3/

Try this instead:
$('body').contents().hide();
$('#show').show();​
jsFiddle example
This will hide all children of the body and show the element with ID show.

Hide the other elements, not the whole body.
$('span').hide();
$('#show').show();

Try appending span after the body tag, like this.
<body>
<span>test</span>
<span>test</span>
<span>test</span>
<span id="show">aaaaaa</span>
</body>
$('body span').hide();
$('#show').show();
jsfiddle.net example

$('body').find('*').not('#show, #show > *').hide();

jQuery click function using same classes

I have a dropdown function that I need to work only on the div clicked, not all (I have 14+ of the same classes on the page that need to be displayed when a certain one is clicked)
At the moment my jQuery is as follows.
$('.qacollapsed').hide();
$('.qa').click(function () {
$('.qacollapsed').slideToggle();
$(this).toggleClass('active');
});
Of course, that is toggling all qacollapsed classes when there is 14 on the page (Q&A)
Is there a way for it to only drop down the one that is clicked?
the HTML
<div class="qa">
<h4 class="question"> </h4>
</div>
<div class="qacollapsed">
<p> </p>
</div>

It would be helpful to provide a snippet of HTML here, but I'll take a guess at the structure of your markup for now..
Instead of referencing all .qacollapsed elements, you need find elements that are close to the .qa that was clicked, e.g.:
$('.qa').click(function () {
$(this) // start with the clicked element
.find('.qacollapsed') // find child .qacollapsed elements only
.slideToggle();
$(this).toggleClass('active');
});
This will work if .qacollapsed is inside .qa - if not, you might need to use next (for siblings), or one of the other jQuery tree traversal methods.

Yo could find() it or use this as a context in the selector to choose only a descendent of the clicked object
$('.qa').click(function () {
$('.qacollapsed', this).slideToggle();
//You could do $(this).find('.qacollapsed').slideToggle();
$(this).toggleClass('active');
});

Check out the jQuery selectors and why not just use $(this)?

$('.qacollapsed').hide();
$('.qa').click(function () {
$(this).toggleClass('active').next().slideToggle();
});

Personally, I'd give all the divs IDs, the clickable bit being the ID of the question in the database for example, and the answer just being id='ID_answer' or something, then use jquery to slide in the div with the id corresponding to the link clicked, ie
Var showIt = $(this).attr('id') + '_answer'
$('.qacollapsed').not('#'+showIt).hide();
$('#'+showIt).slideToggle;
That will hide all the divs without that ID and show the required one.
Dexter's use of .next above looks simpler though, I've not tried that as being relatively new to jquery too.