We Keep Coding

Dynamic color changing feature

https://www.evdemimar.com/oturma-odasi-renk-secimi/
Look this website and the feature. If you click on the color the wall color is changing dynamically.
how to do this feature.

Cut out the image's background in software such as Photoshop and save it as a transparent PNG;
Place this image inside an HTML div;
Change background of the div dynamically using jQuery:
jQuery:
$( '.colour-1' ).on( 'click', function() {
$( 'div.foo').css( 'background-color', '#00CCFF' );
} );
$( '.colour-2' ).on( 'click', function() {
$( 'div.the-one-that-contains-the-img').css( 'background-color', '#999999' );
} );
HTML:
<div class="foo">
<img src="transparent-background-room-image.png" />
</div>

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>

addEventListener (show/hide)

I want do a toggle with a button to show and hide a tag(div). So, buttom(toggle) --> to div(show/hide).
window.onload = function(){
var button = document.getElementById('button');
function show(event){
event.target.classList.toggle('hide');
}
button.addEventListener('click', show, false);
}
Because in jQuery is so:
$(document).ready(function(){
$( "#button" ).click(function(){
$( "div" ).toggle( "slow" );
});
});
But in JavaScript?

I do not completely understand your question but I suspect your trouble is with targeting the div which should be hidden or shown.
To do this with jQuery:
HTML
<button class="toggle">Toggle</button>
<div class="text">Hello</div>
Javascript
$(document).ready(function(){
$("button.toggle").click(function(){
$("text").toggle();
});
}

Toggle 2 div with one onclick

I have 2 divs which i need to toggle them with one button, the first one slide Up and the second one slide down.
HTML
dasdasdasdasd
<button>Toggle 'em</button>
JQuery
$( "button" ).click(function() {
$( "#nav" ).slideUp();
});
Can anybody help me out?
JSFIDDLE

You can use class instead of id and make one div hidden by using display:none;
html:
<div class="nav" style="background:black; width:100%; height:95px">dasdasdasdasd</div>
<div class="nav" style="background:gray; height:200px;display:none;"></div>
<button>Toggle 'em</button>
jquery
$( "button" ).click(function() {
$( ".nav" ).toggle( "slow" );
});
Demo

Use a class or then name attribute instead of an id .
HTML
<div class="nav" style="background:black; width:100%; height:95px">dasdasdasdasd</div>
<div class="nav" style="background:gray; height:200px"></div>
<button>Toggle 'em</button>
JS
$( "button" ).click(function() {
$( ".nav" ).toggle( "slow" );
});
JSFiddle
PS
Never use the same id for two elements. An id should be unigue.

You need to hide one element to toggle them differently
$( "button" ).click(function() {
$( "#nav1" ).slideToggle( "slow" );
$( "#nav2" ).slideToggle( "slow" );
});
Demo

Try this,
Html
<div id="nav1" style="background:black; width:100%; height:95px">dasdasdasdasd</div>
<div id="nav2" style="background:gray; height:200px"></div>
And some CSS
#nav1{
display:none;
}
Script
$( "button" ).click(function() {
$( "#nav1,#nav2" ).slideToggle( "slow" );
});
Demo

Duplicate ids are invalid html, you should rather use class instead.
You will also need to hide one element in beginning for toggling.:
$( "button" ).click(function() {
$( ".nav" ).slideToggle( "slow" );
});
Working Demo

It seems that your div has an id of nav. In order to select 2 divs, you can try assigning the same class name to both, for example:
<div class="nav"></div> (x2)
Then change your jQuery to:
$('.nav').slideUp();
That way, jQuery knows to select both divs and slide them up.

JQuery - Adding class onto element, and then interacting with that class doesn't work

When you click ( ".toggle-button a" ), it adds .close class to itself. And fades in .info-overlay
This works fine, but when you click it again, I want info-overlay to fade out again, and the close class to be removed. But this doesn't work.
Am I missing something here?
http://jsfiddle.net/bazzle/xpS9P/1/
html
<div class="toggle-button">
<a>click</a>
</div>
<div class="info-overlay">
content
</div>
css
.info-overlay{
display:block;
width:100px;
height:100px;
background-color:green;
display:none;
};
js
$( ".toggle-button a" ).click(function() {
$( ".info-overlay" ).fadeIn("500");
$(this).addClass('close');
});
$( ".toggle-button a.close" ).click(function(){
$( ".info-overlay").fadeOut("500");
$(this).removeClass('close');
});

Use event delegation:
Change
$( ".toggle-button a.close" ).click(function(){
$( ".info-overlay").fadeOut("500");
$(this).removeClass('close');
});
to:
$(document).on('click',".toggle-button a.close",function(){
$( ".info-overlay").fadeOut("500");
$(this).removeClass('close');
});
Because a .click() is attach and forget handler, but .on() is dynamic.

see updated Fiddle
$( ".toggle-button a" ).click(function() {
if($(this).hasClass('close')){
$( ".info-overlay").fadeOut("500");
$(this).removeClass('close');
}else{
$( ".info-overlay" ).fadeIn("500");
$(this).addClass('close');
}
});
reference hasClass()

You could use delegation or just set your logic as following:
DEMO
$(".toggle-button a").click(function () {
$(".info-overlay").fadeToggle(500).toggleClass('close');
});