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

Disable parts of HTML code from a script

I need to disable some HTML code from a script that is parsed into a div box with a specified ID. I have no access to the source of the script. Just for example let's assume the script parses some headings <h1> with some text and some lists <ul> with some items <li>.
Some months ago I found a way to disable some parts of the code matching a specific pattern, but I can't remember how this works or how this was called. How can I disable every <h1> tag parsed into the div box?
EDIT: What I need is to find every tag with the pattern <h1> and let the browser ignore it.

h1 can only be made invisible or hidden.
This can be easily accomplished using jQuery like:
.hide(), or .css('display', 'none')
The above will remove the element from the layout thus the space occupied by this element collapses.
.css('visibility', 'hidden')
The above will make the element transparent but the space is still occupied.
For some other elements such as button or input, they can be made disabled, such as:
<button type="button" disabled>Click Me!</button>
or
jQuery 1.6+:
.prop('disabled', true);
jQuery 1.5 or below:
.attr('disabled', 'disabled');

Not sure what you mean by disabled but you can hide them easily with JQuery?
$('#thediv h1').hide();

You can just find all of the children of a certain item by tag name, and then remove them from the DOM. They will still exist, but they won't be attached to the DOM anymore.
The HTML:
<div id="box">
<h1>Inside the box</h1>
</div>
<h1>Outside the box</h1>
The JavaScript:
var box = document.getElementById('box');
var headers = box.getElementsByTagName('h1');
for (var i = 0; i < headers.length; i++) {
box.removeChild(headers[i]);
}
JSFiddle example.

How to access the sibbling node of parent in javascript?

I have various questions on my faq page like this
<h3>How to signup?</h3>
<div class="info" style="display:none">
This is the hidden answer
</div>
The answer is hidden and when the user clicks on the link the div below it appears.Though I can do this using jquery easily but I don't want to make the page heavy so I simply using the following function
function toggle_display()
{
var answers=document.getElementsByClassName("info");
for(var i=0;i<answers.length;i++)
{
//hide all the divs first
answers[i].style.display='none';
}
//return block as style so that the caller's div answer can be set to block
return 'block';
}
But I am having problem accessing the next sibbling div of the link.What should I substitute in the following line
<a href="#" onclick="**this.parent.nextSibbling**.style=toggle_display()">

If you want to get the next sibling of parent node then your code should be like this.
this.parentNode.nextSibling

For ignoring text dom nodes and get the right one element use:
this.parentElement.nextElementSibling.style = ......

Jquery - How to select an html element within a div, which is contained in an ASP.NET repeater ItemTemplate?

I have an ASP.NET repeater, which contains 3 divs inside the ItemTemplate.
Each div, in turn has a number of html elements. I would like to reference an element in the first div (the 3 divs are placed vertically and parallel to each other from left to right).
I have a button in the 3rd div. When pressed, I want to be able to select an element which is contained within the first div.
This is the code I've got so far:
$("#editButton").click(function () {
var nameBox = $(".nameBox", $(this).parent());
});
I'm not really sure how to select the element within the first div though. Could anyone kindly suggest some code please?

Just get the siblings and find the element with the class name.
Assuming your markup is like this:
<div>
<div class="namebox">found me</div>
</div>
<div>
</div>
<div>
<input type="button" id="btn" value="click"/>
</div>
$("#editButton").click(function () {
var nameBox = $(this).parent().siblings(':eq(0)').find('.nameBox');
});
jsFiddle Example

Why dont you assign an id to the div? Or use the first selector http://api.jquery.com/first-child-selector/

jquery toggling a div - how to do this with multiple ids?

I am new to Jquery. My setup is as follows:
I have a series of divs that need to be able to be toggled (display hidden and shown). Each div has an action that can be performed so a unique ID will be necessary to know from which div the event came from.
To toggle the div I have a button for each div (which is not located within the div to be toggled).
Right now without jquery, I use the button's onclick event to pass the ID of the corresponding div to be toggled. Using the unique ID I can do the following:
function toggleFlag(divId) {
var div = document.getElementById(divId);
div.style.display = (div.style.display=="block" ? "none" : "block");
}
divId is unique so I also know where the event comes from if action within the div is performed.
the anchor code looks something like this:
onclick="toggleFlag('id-111');"
where the '111' is the unique id
First off, is it even worth it to use jquery for this if the extent of my javascsript isn't much more complicated (aside from maybe simple ajax).
More importantly, how would this properly be done using jquery?
Update: I am very close to solving this. I managed to get it to work using one of the suggestions below requiring unique class names for each button. A couple of the methods suggest implementations where the class name is the same for all buttons (I want this in order to be able to statically assign styles to the button class), but I could not get these to work. Could somebody please elaborate on the solution? Thanks!

Let's say that you build your anchors to have an id that corresponds with the id of the DIV to toggle and further that they all have a common CSS class. For example,
Toggle
<div id="d_111">Some stuff.</div>
Now you could use jQuery to build the click handlers for all of these pretty easily.
$(function() {
$('a.toggleButton').click( function() {
var divId = $(this).attr('id').replace(/a_/,'d_');
$(divId).toggle();
});
});

You could do something like this:
HTML:
<button id="btnId1" class="divId1" value="Click me to toggle divId1"/>
<button id="btnId2" class="divId2" value="Click me to toggle divId2"/>
etc...
<div id="divId1">div 1</div>
<div id="divId2">div 2</div>
etc...
SCRIPT:
$(function() {
$("button").click(function() {
var divId = $(this).attr("class");
$("#" + divId).toggle();
});
});
This approach has the advantage of only defining the event once for all buttons. You could also use another strategy for storing the div id in the button information, like a non-standard attribute - which jquery can pick up as well, or make the div id a part of the button id like so:
<button id="btn_divId1" value="Click me to toggle divId1"/>
<div id="divId1">div 1</div>
and then extract the id of the div from the id of the button clicked (personally this is the approach I'd take)
Hope this helps
EDIT: To answer the first question, yes you would benefit from doing this with jQuery since it would shorten the amount of code that you are writing and it would allow you to move to unobtrusively assigning events to the buttons which is a good thing :)
EDIT 2: Using non-standard attributes:
HTML:
<button id="btnId1" divid="divId1" class="btnToggle" value="Click me to toggle divId1"/>
<button id="btnId2" divid="divId2" class="btnToggle" value="Click me to toggle divId2"/>
etc...
<div id="divId1">div 1</div>
<div id="divId2">div 2</div>
etc...
SCRIPT:
$(function() {
$("button").click(function() {
var divId = $(this).attr("divid");
$("#" + divId).toggle();
});
});