We Keep Coding

Loop using jquery and javascript

I'm having some trouble thinking of how to do this properly.
Right now, I have some jquery that looks like this:
$( "#person_0" ).click(function() {
$( "[id^=person_]" ).removeClass("active");
$( "#person_0" ).addClass("active");
$( "[id^=bio_]" ).hide();
$( "#bio_0" ).show();
$( "[id^=hoverInfo_]" ).hide();
$( "#hoverInfo_0" ).show();
});
$( "#person_1" ).click(function() {
$( "[id^=person_]" ).removeClass("active");
$( "#person_1" ).addClass("active");
$( "[id^=bio_]" ).hide();
$( "#bio_1" ).show();
$( "[id^=hoverInfo_]" ).hide();
$( "#hoverInfo_1" ).show();
});
...
...
Essentially, if you click a person_0 div id, a class of active is added to that and both hoverInfo_0 and bio_0 show up. At the same time, all other ids go and hide (for example, hoverInfo_1, hoverInfo_2, bio_1, bio_2, etc.
This is super inefficient because I want there to be 100+ person_ ids. I feel like I'm overlooking something obvious.
Pseudo code right now:
if person_0 div is clicked
give person_0 div active class
show hoverInfo_0
show bio_0
hide all other hoverInfo_# (say 1-1000)
hide all other bio_# (say 1-1000)
else if person_1 div is clicked
give person_1 div active class
show hoverInfo_1
show bio_1
hide all hoverInfo_# (say 1-1000) that does not equal hoverInfo_1
hide all bio_# (say 1-1000) that does not equal bio_1
else if ...
else if ...
I'm having a hard time trying to figure out how I can loop this around or use a variable in place of the _# value to make this more efficient. Any thoughts?

how I can loop this around or use a variable in place of the _# value
to make this more efficient. Any thoughts?
Try this approach using starts with and filter
$( "[id^='person_']" ).click(function() {
var id = $( this )[0].id;
console.log(id);
var counter = id.split("_").pop();
$( "[id^='person_']" ).addClass("active").not( "#person_" + counter ).removeClass("active");
$( "[id^='bio_']" ).hide().filter( "#bio_" + counter ).show();
$( "[id^='hoverInfo_']" ).hide().filter( "#hoverInfo_" + counter).show();
});
Demo
$( "[id^='person_']" ).click(function() {
var id = $( this )[0].id;
console.log(id);
var counter = id.split("_").pop();
$( "[id^='person_']" ).addClass("active").not( "#person_" + counter ).removeClass("active");
$( "[id^='bio_']" ).hide().filter( "#bio_" + counter ).show();
$( "[id^='hoverInfo_']" ).hide().filter( "#hoverInfo_" + counter).show();
});
.bio, .hoberInfo
{
display: none;
background-color : green;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="person_1">Person 1</div>
<div id="bio_1" class="bio">Bio 1</div>
<div id="hoverInfo_1" class="hoberInfo">HoverInfo 1</div>
<div id="person_2">Person 2</div>
<div id="bio_2" class="bio">Bio 2</div>
<div id="hoverInfo_2" class="hoberInfo">HoverInfo 2</div>
<div id="person_3">Person 3</div>
<div id="bio_3" class="bio">Bio 3</div>
<div id="hoverInfo_3" class="hoberInfo">HoverInfo 3</div>

innerHTML not adding html content

I believe I almost have this working. I have a footer already, but when the button is clicked it slides down along with it's contents. After it slides down, I have used javascript to remove that footer and it's contents and I have created another footer element. I have appended it to include a div. When I check the inspector element it shows the new footer and the empty div exists. However, when I add the innerHTML to the id of the div, it does not populate it with the code. Here is the code for the javascript:
var slide = document.getElementById('slide');
var info = document.getElementsByClassName('info');
var input = document.getElementById('input');
var footer = document.getElementById('footer');
var addFooter = document.createElement('footer');
var newFooterContent = '<div class="col-md-8 col-md-offset-2"><input type="text" class="form-control move-right" size="105" placeholder="Say “Hello” or whatever else is on your mind"> </div> <div class="col-md-2"> <button type="submit" class="btn btn-default">Submit</button> </div>'
$( document ).ready(function() {
$( "#hidePic" ).click(function(e) {
e.preventDefault();
$( "#slide" ).slideToggle( "fast", function() {
footer.parentNode.removeChild(footer);
document.body.appendChild(addFooter);
addFooter.appendChild(input);
input.addInnerHTML = newFooterContent;
});
});
});

Replace
input.addInnerHTML = newFooterContent;
with
input.innerHTML = newFooterContent;
and it should work

jQuery - Making a DIV both .draggable and .droppable

I was toying about on jsFiddle and was wondering at all if it was possible to make an object both .draggable and .droppable, for example so that I would be able to make it so that Div.1 could be dropped onto Div.2 and vice versa.
My jQuery
$(function() {
$( "#draggable" ).draggable({revert: true, snap: 'inner'});
$( "#droppable" ).droppable({
drop: function( event, ui ) {
var one = $(this).html();
var two = ui.draggable.html();
$(this).html(two);
ui.draggable.html(one);
}
});
});
and My HTML
<div id="draggable droppable">16.00 - 17.00</div></br>
<div id="droppable draggable">13.00 - 14.00</div></br>
<div id="draggable droppable">14.00 - 15.00</div></br>
<div id="droppable draggable">09.00 - 10.00</div></br>
<div id="draggable droppable">07.00 - 08.00</div></br>
<div id="droppable draggable">18.00 - 19.00</div></br>
Any ideas anybody? Thanks!

Try using classes instead of id's when using them more then once as id's can only be used once
also you cannot use 2 id's on 1 element.

i correct your code. problem is you use id, id is unique in html page when we use those id in java script. I replace those id with class.
$(function() {
$( ".draggable" ).draggable({revert: true, snap: 'inner'});
$( ".droppable" ).droppable({
drop: function( event, ui ) {
var one = $(this).html();
var two = ui.draggable.html();
$(this).html(two);
ui.draggable.html(one);
}
});
});
<div class="draggable droppable">16.00 - 17.00</div></br>
<div class="droppable draggable">13.00 - 14.00</div></br>
<div class="draggable droppable">14.00 - 15.00</div></br>
<div class="droppable draggable">09.00 - 10.00</div></br>
<div class="draggable droppable">07.00 - 08.00</div></br>
<div class="droppable draggable">18.00 - 19.00</div></br>

js stretch background image

This code is using backstretch plugin (http://srobbin.com/jquery-plugins/jquery-backstretch/)
This should stretch background.jpg which is called by
if($( ".container" ).length > 0) {
$.backstretch("/images/background.jpg");
Is above the same as this then?
$( "body" ).append( "<div class='bg' id='backstretch'>
<img src='/images/background.jpg' />
</div>" );

no, $.backstretch() calls the plugin, which does more as just appending the image with markup. see https://github.com/srobbin/jquery-backstretch/blob/master/jquery.backstretch.js

Simply function to separte buttons

I have very basic problem, actually it's look Here. I want to separate two buttons.
jQuery
$( "span" ).click(function() {
$( "p" ).toggle( "slow" );
});
HTML
<span>↓ Hobby </span>
<p class="contentDiv" >Such interesting text, eh?</p>
<br> <br>
<span>↓ Sport </span>
<p class="contentDiv" >Such interesting text, eh?</p>
I was trying by getElementById but it doesn't work.
I'm beginner, be patient.

When you are using $('p') you are selecting all p elements, you need to specify like this
$( "span" ).click(function() {
$(this).next().toggle();
});

Try this.
$( "span" ).click(function() {
$(this).closest('p').toggle();
});