Develop Reference

How do you pass an instance of the control being clicked when adding the on click from jquery?

I am working on a side navigation bar and have a label around the actual links in the sidebar to provide padding and borders. I would like the user to be able to click anywhere in this label and go to the link. I wrote this function for that:
function allowLabelClick(control) {
$(control).find('a')[0].click();
}
If you add this inline to the onclick of an individual label and pass (this) as the paramter, it works fine. However I basically have 100 or so links all with the class 'outerLabel' and don't want to add an onclick to each one manually. Instead I'd like to add it to all elements with the class outerLabel. To do that I wrote this line:
$('.outerLabel').on("click", allowLabelClick());
in my javascript. However I don't know what to pass in the parameter for allowLabelClick. I want it to be the DOM element that was clicked on but "this" doesn't work and I'm not sure what else to try.
Thanks

Use an anonymous function:
$('.outerLabel').on("click", function() { allowLabelClick(this); });

Actually you don't need JS for this. You can solve this with css
.nav a {
display: block;
padding: 10px;
margin: 10px;
...
}

Show and hide different elements on focus

I've been researching some ways to show and hide HTML elements, and I ended up finding this.
My intention is to use a way to show and hide elements without the need to use JavaScript, JQuery, or anything else other than CSS and HTML, so I opted for the use of the attribute "tabindex", and then I created the following simple case of study...
HTML:
<div id="root" tabindex="1">
<div>DIV A</div>
<a class="hidden" href="http://www.google.com">LINK</a>
<div class="hidden">DIV B</div>
<input class="hidden" type="submit" value="input"/>
</div>
CSS:
.hidden
{
color: red;
display: none;
}
#root:FOCUS .hidden
{
display: block;
}
If you look according to the code, the inner div can be easily clicked and selected. However, the link and the button unfortunately can not be clicked or selected. In an attempt to do so, the focus of root div is lost.
My question is very simple. Is there one, or different ways that this can be bypassed / solved without the use of JavaScript or JQuery or something? (CSS and HTML only)
If it was not clear, my intentions are to hide elements so that when they are revealed they can be used. I would like to create a menu that contains submenus, and the submenus appear only when their parent menu is clicked (and not when the mouse passes over them).
Ah! And I have to mention ... I also found a solution that uses checkbox. Unfortunately, this is not feasible, because I would not have to click again on the element so that it is hidden. That is, I'd like just click outside of the element make it to hide its internal element, so I opted for the "tabindex".
Thanks in advance for your attention and patience.

You should add the FOCUS to the hidden class as well so the focus is not lost when selecting those.
#root:FOCUS .hidden,
.hidden:FOCUS
{
display: block;
}

The problem in your code is that whenever you are clicking a hidden class child element, the parent element is losing focus. Thus the css style is applying to default which is to hide the child elements with hidden class.
I think this can be solved using javascript.
function focusRoot(e) {
e.currentTarget.parentElement.focus();
return;
}
var root = document.getElementById('root');
var cs = root.children;
for (var i = 0; i < cs.length; i++) {
var c = cs[i];
c.onfocus = focusRoot;
}
Working fiddle

How can I organize interaction between two divs?

I have two div on page. One of them is hidden, and another one is visible. Both of them is on the same place, and form layers. The first is on background (we don't see it), and the second is overlay (we can see it).
I want to have button to be able to switch visibility of div. When I press the button it must change visibility of div (fist does to the background, the second goes to overlay).
How can I do it with jQuery?
UPD
Here is my try http://jsfiddle.net/0qth6jdn
The problem is I don't know how to make layers with div.

If you just need to change the visibility, Jquery's .toggle() may be the easiest way to go.
Jquery Toggle Docs
If you set both div's classes to be the same, even easier. Just call toggle on the button's click event:
$(".myClass").toggle();
Here's a simple example:
JsFiddle Example
EDIT
Here is your own fiddle updated. Instead of visibility: hidden, I've changed your style to display: none;, as it allows you to use Jquery's .toggle() without having to check for any condition:
Your JsFiddle Updated!!

Do this when your button is clicked (you have to change IdOfDiv1 and IdOfDiv2 to your actual div ids):
$("#IdOfDiv1").toggle();
$("#IdOfDiv2").toggle();

You can do like this:
You create a <input type="checkbox"> ABOVE THE <div> you want.
You give it a nice id like 'div-toggler`.
You set this css:
#div-toggler ~ #your-hidden-div {display:none;}
#div-toggler:checked ~ #your-hidden-div {display:block;}
You create a new <label for="div-toggler"> inside the other <div>
Style it the way you wish, to look like a button.
If you care about old browsers, that don't support :checked on css, use [checked] instead.The you create a <label onclick="var e=document.getElementById(this.getAttribute('for'));e.setAttribute('checked',e.checked);" for="div-toggler"> if it doesn't work after the css change.
UPDATE:
After seeing the new update, it's clear:
if ($('#first').visibility == 'hidden' && $('#second').visibility == 'visible'){
should be
if ($('#first').css('visibility') == 'hidden' && $('#second').css('visibility') == 'visible'){
UPDATE 2:
Actually, this is the right code:
window.replaceDiv=function() {
if ($('#first').css('visibility') == 'hidden' && $('#second').css('visibility') == 'visible'){
$('#first').css('visibility','visible');
$('#second').css('visibility','hidden');
}
}
Here it is: http://jsfiddle.net/gughtms7/

There are a million ways to do this. If both divs have an id, you can simply toggle them, like so:
$('#id-of-your-button').on('click', function(){
$('#id-first-div').toggle();
$('#id-second-div').toggle();
});
Another way would be to toggle a class on a parent element:
$('#id-of-your-button').on('click', function(){
$('#parent').toggleClass('switch');
});
And than apply all changes via css
#parent #id-second-div {
display: none;
}
#parent.switch #id-first-div {
display: none;
}
#parent.switch #id-second-div {
display: block;
}
It all depends on your situation

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

alter divs css with javascript

Can I change style of some div link. Here is what I mean
<div id="somediv">something/div>
Lets say I have css like this :
#somediv a{
color:#000;
}
Now for instance upon some action such as mouse click on any element I want to change somediv a link css to
#somediv a{
color:#00ffff;
}
I know how to select div, by using Document.get.elementById('somediv') Is it possible to select a by using above method or any other?
Thank you
DETAILS: Yes I know how to select it using jquery, or prototype .. I can't use any of those..

If you just want to apply a style to a particular element, it's very easy to do:
document.getElementById('whatever').style.color = '#f0f';
If you actually want to apply cascading styles (eg: #someDiv a), then it's not so easy (though it is definitely possible). I would suggest applying a new class to something, and having a pre-existing rule in your CSS.
CSS:
#someDiv a {
color: #000;
}
#someDiv.awesome a {
color: #f0f;
}
Javascript:
document.getElementById('someDiv').className = "awesome";

Yep, you can modify the actual CSS rules at runtime. See Totally Pwn CSS with Javascript for more details.
If you're using jQuery or YUI, there's some good info in question 1079237

document.getElementById ( 'somediv' ).children[0].style.color = 'new color';
assuming the A tag will be the first element inside your DIV

You could use CSS behaviors for this:
For instance:
#somediv a:hover
{
color:#0ff;
}
Otherwise, you may create a dedicated class (used when an element is click for example):
#onclickclass
{
color:#0ff;
}
Then in JavaScript, on onClick event, do:
document.getElementById('somediv').className = 'onclickclass';

And to change the style use
document.getElementById('somediv').className = 'your-css-class';

If you really want to select the anchor you would have to then traverse the document.getElementById('somediv').children array.
As others have suggested though the simpler answer would be to set the className attribute on your div and let the CSS style cascade onto the anchor tag.