We Keep Coding

Show/Hide Immediate next element Input

I'm trying to show hide immediate next imput within the div, but it opens all the inputs
I also tried
`$(this).next("input").show();` ( traversing )
nothing seems to work.
Any help?
Here is my http://jsfiddle.net/526stLtg/1/

You need to use siblings() and for toggling visibility use toggle()
$(document).ready(function() {
$(".add-guest > button").click(function() {
$(this).siblings('input').toggle();
});
});
.add-guest input[type="text"] {
display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="add-guest">
<b>Bride:</b>
<button id="bride">Add</button>
<br>
<input type="text" name="Bride">
</div>
<br/>
<br/>
<div class="add-guest">
<b>Groom:</b>
<button id="bride">Add</button>
<br>
<input type="text" name="Bride">
</div>

You can use this to refer to html element and using .parent() and .find():
$(document).ready(function() {
$(".add-guest > button").click(function() {
$(this).text() === "Add" ? $(this).text("Remove") : $(this).text("Add");
$(this).parent().find("input").toggle();
});
});
.add-guest input[type="text"] {
display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="add-guest">
<b>Bride:</b>
<button id="bride">Add</button>
<br>
<input type="text" name="Bride">
</div>
<br/>
<br/>
<div class="add-guest">
<b>Groom:</b>
<button id="bride">Add</button>
<br>
<input type="text" name="Bride">
</div>
Additionally you can use .toggle() instead of .show.

You can use $(this) to select the clicked button (the event trigger).
Then, if you look at your code, you'll see that the next element is a <br/>, and the next the <input> that you want to show. So, if you change:
$(".add-guest > input").show();
to
$(this).next().next().show();
It will work. You can think tha you can also use a selector to find the first sibling filtered by the selector, i.e.
$(this).next('input').show();
But this doesn't work. This checks if the sibling can be selected with the paseed selector. But you can use the .nextAll('input'), only because in this case there are only one sibling which can be seelcted like this. If not you could use this selector, and .first()
Your original code was selecting all inputs precede by elements with the .add-guest class, whic is not what you wanted to do.

If there are multiple input elemnts within div and you want to select first input element only then use :first pseudo-class
$(this).parent().find("input:first").toggle();

Creating a targeted onclick event with element

I implemented a javascript code which converts a div into a canvas. Below is the code:
JS
$(window).load(function(){
$(function() {
$(".btnSave").click(function() {
onrendered: function(canvas) {
thyCanvas = cnvs;
document.body.appendUncle(cnvs);
cnvs.toWall(function(Wall) {
saveAss(Wall, "xprf.png");
});
}
});
});
});
});
When the user clicks the button (.btnSave), they convert the div called #widget into a canvas element. There are multiple divs(all different) and I've placed the button beside each div.
<input type="button" class="btnSave" value="Conver this box"/>
<div id="widget" style="width:10px; height:10px; background:red">
</div>
<input type="button" class="btnSave" value="Conver this box"/>
<div id="widget2" style="width:10px; height:10px; background:blue">
</div>
<input type="button" class="btnSave" value="Conver this box"/>
<div id="widget3" style="width:10px; height:10px; background:green">
</div>
The problem is that I'd like for my users to be able to click any of the buttons beside each div and when they do so, the div beside the button will be converted into a canvas.
TL;DR I'm trying to get my button to work for the div that it's beside so users can convert any of the divs into a canvas.

jQuery has the .next() method that allows you to select the next sibling of an element. In your case, it will be the next element from the current clicked button:
$(".btnSave").click(function() {
html2canvas($(this).next(), {

jquery search box and button

I've got a button and text box, when you hover over the button the search box will appear using this piece of JavaScript/jquery:
$('#search-button').hover(function () {
$('#search-text').show();
}, function () {
$('#search-text').hide();
});
However at the moment once you hover over the button it will display the text box but as soon as you try to hover over the text box it will disappear. Is there a way to have the text box remain on the page when you hover over it too.
Here is a Fiddle to describe the problem

you don't need Jquery for this. A Css styling will do this for you!
By wrapping your content within an element, you can show/hide any (/all) elements within the wrapper. I've made a basic demo below:
please note the padding/background on the .search class are purely for demonstration, and can be edited/removed and still keep its functionality.
button {
display: none;
}
.search:hover button {
display: inline-block;
}
.search {
background: gray;
display: inline-block;
padding: 10px;
}
<div class="search">
<input type="text" placeholder="type here" />
<button>SEARCH</button>
</div>
If, however, you are forced to use Javascript/jquery, then I won't duplicate it here, but refer to chipChocolate.py's answer

A javascript solution to your problem. Check this jsfiddle link:
http://jsfiddle.net/ea45h80n/
$('.search').hover(function() {
$('#search-text').show();
}, function() {
$('#search-text').hide();
});
$('#search-text').hide();
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="search">
<button>SEARCH</button>
<input type="text" placeholder="type here" id='search-text' />
</div>

Attach the hover event to #search-button and #search-text.
$('#search-text').hide();
$('#search-button, #search-text').hover(function() {
$('#search-text').show();
}, function() {
$('#search-text').hide();
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input id="search-text" type="text" /
><input id="search-button" type="button" value="Search" />

remove second function. which is onhoverout. use following:
$('#search-button').hover(function () {
$('#search-text').show();
});

This might Work
$('#search-text').hide(); //on DOM Load hide the element
$('#search-button').mouseover(function()
{
$('#search-text').show(); //When mouse enters the element, then show the textbox input
});

$('#search-button').hover(function () {
$('#search-text').show();
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="button" id="search-button" value="search"/>
<input type="text" id="search-text" style="display:none;"/>

Hide/unhide div with button?

<h1>Welcome! Chat now!</h1>
<button id="button">Chat Now</button>
<button id="buttontwo">Chat Categories</button>
<div id="login" style="visibility:hidden">
<button id="closelogin">Close</button>
<input type="text" placeholder="Username"/>
<p id="loginshiz">Pick a username</p>
<button id="go">Go</button>
</div>
When the chat now button is pressed, I want to make the div "login" appear, and when the "closelogin" button inside the div is pressed, I want to make the whole div hidden again. Currently if no buttons are pressed the div should be at hidden state, cheers!

Use jQuery. No way to do it plain html/css.
$('#button').click(function() {
$('#login').css('visibility', 'visible');
});
$('#closelogin').click(function() {
$('#login').css('visibility', 'hidden');
});
If you don't have jQuery included, use javascript:
document.getElementById('button').onclick = function() {
document.getElementById('login').style.visibility = 'visible';
}
document.getElementById('closelogin').onclick = function() {
document.getElementById('login').style.visibility = 'hidden';
}

Look at my example without using of JavaScript.
<input type="checkbox" id="box"/>
<label id="container" for="box">
<div id="button">Chat Now</div>
<div id="login">
<label for="box" id="closelogin">Close</label>
<input type="text" placeholder="Username"/>
<p id="loginshiz">Pick a username</p>
<button id="go">Go</button>
</div>
</label>
and css
#box{display: none;}
#container #login{ display: none;}
#box:checked + #container #login{ display: block;}
Fiddle http://jsfiddle.net/LUdyb/1/
Hope this help.

Using javascript with the help of the button id you can make the div to be hidden by changing the css property to visible. while using jquery you can use toggle,hide,show.

There is no way you can do this in html/css
You can use Jquery
$('#button').click(function() {
$('#login').css('visibility', 'visible');
});
to close
$('#closelogin').click(function() {
$('#login').css('visibility', 'hidden');
});
you just need to change the ID that is #closelogin and the .css('visibility', 'hidden')
You need to include Jquery library like this in your head or bottom of your page to make it work.
eg:
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>

traverse element inside the div

html:
<div style="width: 260px;margin:25px 0 0 30px">
<input type="checkbox" name="send_email" class="delete_followup" />Send email alerts
<input type="checkbox" value="delete" type="checkbox" />Send SMS alerts <button type="submit" name="delete" value="{{follower.id}}" class="delete_follower">Delete</button>
</div>
js:
$(".delete_followup").click(function(){
var $this = $(this);
$(this).find(".delete_follower").show();
});
I want to show the hidden button on clicking the delete_followup class.i TRIED WITH ABOVE jQuery but not working.

Or try .nextAll:
$(this).nextAll(".delete_follower").show();
Working here: http://jsfiddle.net/tw5XK/

The delete_follower element is not a decedent of delete_followup element, it is a sibling element so instead of find() you need to use siblings()
$(".delete_followup").click(function(){
var $this = $(this);
$this.siblings(".delete_follower").show();
});

You are trying to search downward into the div, when you already have a reference to the element you want. Making it way more complicated than it needs to be lol
$(".delete_followup").click(function(){
$(this).show();
});
Whenever you trigger off a click event, the actual element clicked on is passed through as the scope of the function. Since you are triggering off the click of ".delete_followup", that div is your element scope

Try this:
$(".delete_followup").click(function () {
if (this.checked) {
$(this).siblings(".delete_follower").show();
} else {
$(this).siblings(".delete_follower").hide();
}
});
Demo here