Develop Reference

Toggle hidden row with button using jQuery

I have a table where each visible row has a row beneath it whose visibility can be toggled by pressing a button. A live demo of this can be found here.
I'm really new to using jQuery and the problem I'm encountering is probably a simple fix to be honest. First of all, I want the togglable rows to be hidden by default and only shown when the button is clicked (now they show when the page is loaded). How can I do this?
To hide the rows I have the following:
$(document).ready(function(){
$("#button1").click(function(){
$(".trhideclass1").toggle();
});
});
$(document).ready(function(){
$("#button2").click(function(){
$(".trhideclass2").toggle();
});
});
I don't want to have to create a function for every button separately, so what is a better way to do this? My idea was to give a <button> and <tr> the same id and somehow make the button only toggle stuff with the same id, is this possible?

You can add a class to the buttons (like btn-toggle) and then traverse the DOM for getting the target element:
$(".btn-toggle").click(function() {
$(this).closest('tr').next('tr').toggle();
});
The values passed to the .closest and .next methods can be any valid selector. For understanding how these methods work you can refer to the jQuery documentations.
https://jsfiddle.net/mc1dkq6a/

You can set default hide in css
.trhideclass1,.trhideclass2{
display : none;
}
For more easy to handle you should change your button id only as number
HTML
<button id="1" class="btn btn-primary">Click me</button>
<button id="2" class="btn btn-primary">Click me</button>
JS
$(document).ready(function(){
$(".btn").click(function(){
current = $(this).attr('id');
$('.trhideclass'+current).toggle();
});
});

How to change dynamically a href reference

I have a navbar, like this:
<a href="#head" class="navbar-icon iconactive" id="startIcon">
I dynamically create:
$(".content").append("<div id="1"><section class='section' id='head'>.....);
$(".content").append("<div id="2"><section class='section' id='head'>.....);
head is the id of the section that is currently displayed (I have 2 divs).
I want to dynamically change the navbar a href depending on the div that is currently displayed.

Use .toggle();
$(function() {
$('.toggle').on('click', function() {
$('.content1').toggle();
$('.content2').toggle();
});
});
.content2 {
display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
Toggle
<div class="page">
<div class="content1">:)</div>
<div class="content2">:(</div>
</div>
http://jsfiddle.net/fmkaj81p/

I'm pretty sure that the best way to handle this is using
http://api.jquery.com/index/
I understood you establish the first div as visible, right? Then just when your event (might be a scroll or keyboard input or click ) to hide div and show other happens just add to your logic the a href update as something like
$("a").attr("href",$("newDiv").attr("id"));
Also go inside the next link to get your own working depending on your jQuery version
http://api.jquery.com/attr/

Fade Out And fade in Div with specific class and id

I am facing a little issue with some jquery code. I have some divs (look bellow)
<div class="add" id="1">Follow</div>
<div class="added" id="1">Following</div>
<div class="add" id="2">Follow</div>
<div class="added" id="2">Following</div>
I am trying when user clicks in each div with class add to fadeout the specific div and fade in the next div with class added.
Check my Code:
<script type="text/javascript">
$(document).ready(function($){
$('.add').click(function () {
$(this).find('.add').hide("fast");
$(this).find('.added').fadeIn("slow");
});
});
</script>

ID's must be unique and it should not be a number. You have to set different ids for your divs. Additionally you have to hide the div with class .added initially to achieve your need.
Because fadeIn wont work on elements which are already visible.
Try,
<script type="text/javascript">
$(document).ready(function($){
$('.added').hide();
$('.add').click(function () {
$(this).hide("fast");
$(this).next('.added').fadeIn("slow");
});
});
</script>
DEMO

You need to use $(this) to hide current element and use next to hide .added, also use unique ids to make your html valid.
The next element is already visible you probably need fadeOut() to hide it.
Live Demo
$('.add').click(function () {
$(this).hide("fast");
$(this).next('.added').fadeOut("slow");
});

You can't have same id on multiple elements. Instead use a class
$('.add').on('click', function(){ $(this).fadeOut().next('.added').fadeIn(); });

Couple of points:
Ids should be unique. In case, you need same selector on group of elements, use class.
this reference contains the target on which event listener is added, So your this context contains the element with add class. jquery.find() tries to match the selector on the children. That's why your code is not working.
Just try this Jsbin Demo
HTML
<div class="wrapper">
<div class="add" id="1">Follow</div>
<div class="added" id="1">Following</div>
</div>
JS
$('.wrapper').click(function () {
$(this).find('.add').hide("fast");
$(this).find('.added').fadeIn("slow");
});
Idea: Bind event listener on parent.

How to show all child nodes in jQuery

show all children
hide child 1
hide child 2
<div id="p" style="display:none;">
<div id="c1">child 1</div>
<div id="c2">child 1</div>...
</div>​
$("#lnkP").click(function(){
$("#p").children().show(); //seems there's a problem here...
});
$("#lnkC1").click(function(){
$("#c1").hide();
});
$("#lnkC2").click(function(){
$("#c2").hide();
});​
jsFiddle: http://jsfiddle.net/CBGsF/1/
What I am trying to do is:
p is a parent container
click show all children link, display
all child divs under p
click lnkC1 or lnkC2 to hide
individual child div
But it seems that I didn't get .children() working correctly. So how to fix it? Any ideas?

Since the parent (#p in your case) has a display:none, it's children won't be visible.
You'll need to show the parent first,
$("#p")
.show()
.children().show();
(jQuery's chaining, very helpful)
Please try and get rid of the inline styling (it gets unmanageable after a while), use classes as much as possible.
You can have a class in css,
.displayNone
{
display: none;
}
.displayBlock
{
display: block;
}
And then use jquery methods .removeClass(), .addClass() or .toggleClass() to show/hide your elements.
This is just a recommendation :)
Test link: http://jsfiddle.net/CBGsF/8/

You need to show the #p also
Updated fiddle: http://jsfiddle.net/CBGsF/7/
$("#lnkP").click(function(){
$("#p").show().children().show(); //Add show() before children.show call
});
$("#lnkC1").click(function(){
$("#c1").hide();
});
$("#lnkC2").click(function(){
$("#c2").hide();
});​

Updated fiddle : http://jsfiddle.net/CBGsF/5/
$("#lnkP").click(function(){
$("#p").show();
$("#p").children().show();
});
$("#lnkC1").click(function(){
$("#c1").hide();
});
$("#lnkC2").click(function(){
$("#c2").hide();
});​

Parent element is set to "display":"None" That is the problem
$("#p").css("display","block"); //is required in show all anchor click
Check the fiddle
http://jsfiddle.net/CBGsF/6/
Thanks

(Posted solution on behalf of the question author).
I thought .children() would search for invisible nodes as well. Well, I was wrong on that.

JQuery How do I make part of a form highlighted when focused?

I have a form which is divided into parts seperated by divs eg:
<form>
<div>
Account Details
</div>
<div>
Personal Details
</div>
<div>
...etctec
</div>
</form>
I want that when someone highlights or focuses on any element within the divs the div in question is highlighted using css. Consider the fact that I have applied a number of handlers to certain input elements on this form.

You could try:
$('input').focus(
function(){
// adds the 'highlight' class to the parent
$(this).closest('div').addClass('highlight');
});
With:
$('input').blur(
function(){
// removes the 'highlight' class from the parent so only one highlight is ever visible.
$(this).closest('div').removeClass('highlight');
});
And define the highlight class in CSS:
.highlight {
background-color: #ffa;
}
JS Fiddle demo, please note that, in the demo, I use fieldsets rather than div to wrap the various label and input elements, but otherwise it's exactly the same principle.
Updated the demo for increased prettiness: Revised JS Fiddle.
Edited in response to question from OP:
Thats great - however theres a little problem with this code i.e that if ever an input within a div loses focus the div is shown as unhighlighted. Is there a way so that a div remains focus until an input element in another div is focused upon which the parent of the focused div would then get highlighted
Yeah, assuming that I've understood you right, that's pretty easy:
$('input').focus(
function() {
$(this)
.closest('form')
.find('.highlight')
.removeClass('highlight');
$(this).closest('fieldset').addClass('highlight');
});
JS Fiddle demo.

$('form > div').delegate('input', 'focus', function() {
$(this).closest('div').addClass('active');
}).delegate('input', 'blur', function() {
$(this).closest('div').removeClass('active');
});
Demo: http://jsfiddle.net/ThiefMaster/fG8Au/
If you want to be sure that only the div right inside the form tag is highlighted, use $(this).closest('form > div').

Create a highlight class in your CSS and try the following jQuery:
$('input, select, textarea').focus (function ()
{
var elem = $(this), container = elem.parents ('div');
container.siblings ().removeClass ('highlight');
container.addClass ('highlight');
})

Try this:
.highlight{background:#ddd}
$('input').focus(function(){
$(this).parent().parent().find('div.highlight').removeClass('highlight');
$(this).parent().addClass('highlight');
});