We Keep Coding

Why am I having difficulty scrolling via href="element"?

So I have a button that toggles a div to show / hide using a .hidden class to display:none and visibility:hidden.
But for some reason, when I anchor said button, it does not scroll down to the hidden class? And in this case, the button won't anchor to anything at all?
Button
anchoring to
<div id="anchor" class="hidden">Stuff</div>
and jQuery is simply:
$(".btn").click(function() {
$("#anchor").toggleClass("hidden");
});
Any thoughts?

You need to remove onclick="return false;" from your element - this is preventing default behavior
JSFiddle Link - working demo
Alternatively - if you need to prevent the default behavior because of some weirdness going on per your comments - you could always manually scroll to it. Here is an animation driven approach with an optional time in ms to finish...
$('.btn').click(function(e) {
e.preventDefault();
$('html, body').animate({
scrollTop: $('#anchor').offset().top
}, 200);
});
JSFiddle Link - alternative demo
Lastly - for the "no frills" approach - the following should suffice (reference)...
$('#anchor').get(0).scrollIntoView();

Set focus to element after slideToggle removes display:hidden attribute with jQuery

So I have looked at a bunch of examples and still cannot seem to figure this one out. I have an element that I am hiding "display:none" until it is expanded by a link using jQuery slideToggle. Working but I need the focus to go to the new element div. I've tried a bunch of examples and nothing seems to be working so I'll post it here.
Here is the fiddle:
JS FIDDLE
So on click of this link here:
<div><p>Blah Blah <a id="whyDivLink" class="staticLinkHelper" title="Wblah blah bl title" style="color: #8f0222; text-decoration: underline">Click Me?</a></p>
</div>
I am trying to do two things, well three but two would be marvelous.
1. Scroll to this DIV which is just a bit further down the page.
2. Focus on the text that is now showing.
Apparently because the node is hidden, then it will not focus to it or something to that affect and it has nothing to scrollTo or when I have tried it just scrolls all the way to the top. But I have a fixed header so that does not work because then it is just hidden. So what I have now is basically working and scrolling to the div and from what I can tell... focusing on it. But I need to set it a ways from the top and when I try it breaks the scrolling. Any one see what I am doing wrong?
$(function() {
$("#whyDivCloser").click(function () {
$("#whyDiv").slideToggle("slow");
});
});
$(function() {
$('#whyDivLink').click(function (evt) {
$("#whyDiv").slideToggle("slow");
});
});
Any help would be appreciated

Looks like when you apply display:none initially to the div, clicking on the a link won't lead user to the targeted div anymore. To fix this, you can try using code to hide the div initially using slideToggle, of course the initial state of the div is display:block, slideToggle will hide it for you instead of setting display:none initially while clicking on the link will work expectedly (jump to the targeted div).
JS:
$(function() {
$("#whyDiv").slideToggle("slow"); //add this line to hide it initially
$("#whyDivCloser").click(function () {
$("#whyDiv").slideToggle("slow");
});
});
$(function() {
$('#whyDivLink').click(function (evt) {
//append .focus() to focus the text
$("#whyDiv").slideToggle("slow").focus();
});
});
Updated Demo.

Trouble with Javascript show when element is outside of the trigger

I am trying to show a div on click on an anchor, the issue is the anchor is inside an element and the div that needs to be shown is outside of this element. There are multiple divs of the same class on the page so I only want to show the associated one.
The markup is:
<div class="wrapper">
<div class="trigger">
Change
</div>
<div class="content">
<p>Content to be shown when Change is clicked</p>
</div>
</div>

Is that what you want to do? (fiddle)
// dom ready
$(function() {
$('a.change').on('click', function() {
// wrapper div
$(this).parent()
.next() // .content div
.show();
return false; // prevent the link to be followed
});
});

With jQuery you can do it like this:
$('a.change').click(function(e) {
e.preventDefault();
$(this).parent().next().toggle();
});
jsFiddle example

is this what you mean?
$(".content").hide();
$("a.change").click(function(){
$(".content",$(this).closest(".wrapper")).show();
});
Live demo :​
http://jsfiddle.net/dfkge/

Got to the parent and get the correct div e.g.
$('a.change').click(function(event){
event.preventDefault();
$(this).parents('.wrapper').children('.content').show()
}
This way you don't have to worry how deeply embedded anchor is, or where is content (before, after) in relation to anchor
Added a jsFiddle, showing divs with different structures, working with same code
http://jsfiddle.net/NWqcq/11/

Toggling a div with another div

i am trying to make a div toggle another div which appears underneath it.
I have managed to do this with a button, however i was wondering if you could do this with another div, so that when you clicked anywhere inside the div, it would make the other div appear and disappear etc...
Here are the two divs i have
//This div is the one you click on
<div id="more_toggle"></div><!---end more_toggle--->
//This div is the one that appears and disappears through the toggle
<div id="more_info">hello</div><!---end more_info--->
This is the script i use to toggle the divs through buttons, but it doesn't work with another div
$(function(){
$("#server_status_button").click(function(event){
event.preventDefault();
$("#status1").slideToggle();
});
});
Thanks for any help

$("#more_toggle").click(function(event) {
$("#more_info").slideToggle();
});​
jsFiddle example

Have you tried:
$(function() {
$('#more_toggle').click(function(e) {
$('#more_info').slideToggle();
});
});
If you want to hide use display toggling just try .toggle() instead of .slideToggle().

$('#more_toggle').click(function(){
$('#more_info').slideToggle();
});

Allow clicking a link through a div that is bound to the "click" event

I have a div containing some content, in which there are some links. The div itself watches for the click event so it can make the content editable. However, I want the user to be able to click the links inside of the div and have it navigate to the linked page rather than edit the content (clicking anywhere else in the div should edit the content though). How do I achieve this?
Code example:
<div id="content">
Here's a link.
</div>
// jQuery Javascript:
$("#content").click(function() {
// Make content editable
});
(Clicking on the link shouldn't make the content editable, and instead should direct the page to google.com.)
Edit: I'm using my own code to make the content editable (switching out the div with a text area, that sort of thing).

Check the event target and return true
$("#content").click(function(e) {
if ($(e.target).is('a')) {
return true;
}
});
Not tested
The thinking behind this is to bail-out early from the handler and, by returning true, allow the browser to handle the event the usual way.

One error you have is that you are using content as a class in your HTML, but as an ID in your jQuery. So you should change your HTML to id="content" (assuming no other elements on your page already have that id.
Your Javascript can look like:
$("#content").click(function(){
this.setAttribute('contenteditable', 'true');
$(this).focus();
}).blur(function(){
this.setAttribute('contenteditable', 'false');
});
$("#content a").click(function(e){
e.stopPropagation();
});
Here's a JSFiddle: http://jsfiddle.net/q77Bs/

example
use event.stopPropagation()
// jQuery Javascript:
$(".content").click(function(e) {
// make content editable
});
$('.content a').click(function(e) {
e.stopPropagation();
});

You could change the z-index of the link to be greater than that of the div (not sure if that will work), or you can place each link inside another div with a higher zindex than the main div. This will prevent clicks from registering on the primary div, so make sure the secondary divs are correctly sized so as not to prevent the editing functionality

$('#content a ').live("click", function(event){
event.stopPropagation();
});
this will do the trick