We Keep Coding

Working code of 2 buttons for toogle (how to copy them with being active at same time)

i using this code, here:
http://jsfiddle.net/wyEq7/
But i want to copy those two buttons under the divs BUT i don't know how to change code to achieve this:
when i click on button a -> button is active, when i click on button b -> button b is active
i want my copied buttons under div to be active aswell :)
When i click upper button b and it shows on red i want the same on down button b and same thing with button a (no matter if i click upper or down button) :)
Maybe you will understand my vision and can help me, i hope so - thanks :D

You can do this by adding a new CSS class to the buttons. The "A" buttons need the same class and the "B" buttons need the same class. In your javascript you can switch which classes are active based on the class the current target has.
// set content on click
$('.button').click(function(e) {
e.preventDefault();
setContent($(this));
});
// set content on load
$('.button.active').length && setContent($('.button.active'));
function setContent($el) {
$('.button').removeClass('active');
$('.container').hide();
if ($el.hasClass('a-button')){
$('.a-button').addClass('active');
} else {
$('.b-button').addClass('active');
}
$($el.data('rel')).show();
}
.container {
display: none;
}
.button.active {
color: #C00;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="flr-wrap">
<ul>
<li><a class="button active a-button" data-rel="#content-a" href="#">a button</a></li>
<li><a class="button b-button" data-rel="#content-b" href="#">b button</a></li>
</ul>
<div class="flr-inner">
<div class="container" id="content-a">
AAA
</div>
<div class="container" id="content-b">
BBB
</div>
</div>
<ul>
<li><a class="button active a-button" data-rel="#content-a" href="#">a button</a></li>
<li><a class="button b-button" data-rel="#content-b" href="#">b button</a></li>
</ul>
</div>

This can be done by adding another data attribute.
<div class="flr-wrap">
<ul>
<li><a class="button active" data-rel="#content-a" data-group="a" href="#">a button</a></li>
<li><a class="button" data-rel="#content-b" data-group="b" href="#">b button</a></li>
</ul>
<div class="flr-inner">
<div class="container" id="content-a">
AAA
</div>
<div class="container" id="content-b">
BBB
</div>
</div>
<ul>
<li><a class="button active" data-rel="#content-a" data-group="a" href="#">a button</a></li>
<li><a class="button" data-rel="#content-b" data-group="b" href="#">b button</a></li>
</ul>
</div>
// set content on click
$('.button').click(function(e) {
e.preventDefault();
setContent($(this));
});
// set content on load
$('.button.active').length && setContent($('.button.active'));
function setContent($el) {
$('.button').removeClass('active');
$('.container').hide();
$el.addClass('active');
$('a[data-group="' + $el.data('group') + '"]').addClass('active');
$($el.data('rel')).show();
}
Note: You could remove the data-rel attribute and use the one data attribute to dictate everything.

Displaying pictures in html

I am learning about the DOM and incorporating Javascript in html files, I have tried this code that display and hide pictures using the event listener click. however, pictures don't seem to appear even no error is detected in the Chrome console.
NOTE: I only posted the concerned code, I omitted some of the HTML tags
<style>
.hide{
display: none;
}
</style>
<main>
<ul>
<li><a data-img="face" id="facebook" href="#"> Facebook </a></li>
<li><a data-img="insta" id="instagram" href="#"> Instagarm </a></li>
<li><a data-img="snap" id="snapchat" href="#"> Snapchat </a></li>
</ul>
<img class="hide" id="face" scr="https://cdn3.iconfinder.com/data/icons/free-social-icons/67/facebook_square-128.png">
<img class="hide" id="insta" scr="http://bikecleanse.com/wp-content/uploads/2016/10/Insta-Logo.png" >
<img class="hide" id="snap" scr="https://icon-icons.com/icons2/686/PNG/512/snapchat_snap_chat_icon_logo_social_app_red_icon-icons.com_61225.png">
</main>
<script type="text/javascript">
var face = document.getElementById('facebook');
var insta = document.getElementById('instagram');
var snap = document.getElementById('snapchat');
face.addEventListener("click", show);
insta.addEventListener("click", show);
snap.addEventListener("click", show);
function show() {
var picId = this.attributes["data-img"].value;
var pic = document.getElementById(picId);
if(pic.className === "hide"){
pic.className="";
} else {
pic.className= "hide";
}
}
</script>

First off, you issues is that it is src and not scr, so change that attribute and the images will show.
Second, I would recommend using classList with add, remove and contains. You could also use toggle to make your code even smaller like so:
<style>
.hide {
display: none;
}
</style>
<main>
<ul>
<li> <a data-img="face" id="facebook" href="#"> Facebook </a> </li>
<li> <a data-img="insta" id="instagram" href="#"> Instagarm </a> </li>
<li> <a data-img="snap" id="snapchat" href="#"> Snapchat </a> </li>
</ul>
<img class="hide" id="face" src="https://cdn3.iconfinder.com/data/icons/free-social-icons/67/facebook_square-128.png">
<img class="hide" id="insta" src="http://bikecleanse.com/wp-content/uploads/2016/10/Insta-Logo.png">
<img class="hide" id="snap" src="https://icon-icons.com/icons2/686/PNG/512/snapchat_snap_chat_icon_logo_social_app_red_icon-icons.com_61225.png">
</main>
<script type="text/javascript">
var face = document.getElementById('facebook');
var insta = document.getElementById('instagram');
var snap = document.getElementById('snapchat');
face.addEventListener("click", show);
insta.addEventListener("click", show);
snap.addEventListener("click", show);
function show() {
var picId = this.attributes["data-img"].value;
var pic = document.getElementById(picId);
pic.classList.toggle('hide', !pic.classList.contains('hide'))
}
</script>

I added the event input to your show function. I modified your show function like below. Check if this works for you:
function show(e) {
let picId = e.target.dataset.img;
let pic = document.getElementById(picId);
if(pic.classList.contains('hide'){
pic.classList.remove('hide');
}
else{
pic.classList.add('hide');
}
}

Iterate through loaded HTML file elements JQuery

I am currently working on a website. The header is loaded into the main 'search' page using the .load() function from JQuery. However, when I try to iterate through the [href]'s in the page, it cannot find them because the loaded header links haven't been added to the DOM yet (presumably).
function getCurrentPage(){
var count = 0;
$(".navLinks").each(function() {
count+=1
console.log('this.href' + this.href)
console.log('windowloc' + window.location.href)
if (this.href == window.location.href) {
$(this).addClass("active");
}
});
console.log('# of hrefs' + count)
}
This is a function I wrote to add a css class to the current page, but this loop wont work since it cannot find those on the DOM (the .navLinks class is added to all links thats from the loaded header.html file). Thanks for the help!
<header>
<nav class="top-bar nav-desktop">
<div class="wrap">
<div class="top-bar-left">
<div class="logo">
<img class="logo-image" src="repairrepo_logo-02.png" width="250" height="184"></img>
<p class="site-logo">DNA Damage and Repair Database</p>
</div>
</div>
<div class="top-bar-right">
<ul class="menu menu-desktop">
<li><a href="index.html" class = 'navLinks'>HOME </a></li>
<li>
<div class="dropdown">
<button class="dropbtn">BROWSE
<i class="fa fa-caret-down"></i>
</button>
<div class="dropdown-content">
<a href="#" class = 'navLinks'>HUMAN </a>
<a href="#" class = 'navLinks'>MOUSE</a>
<a href="#" class = 'navLinks'>ARABIDOPSIS</a>
<a href="#" class = 'navLinks'>PLANT</a>
</div>
</div>
</li>
<li><a href="search.html" class = 'navLinks'>SEARCH</a></li>
<li><a href="download.html" class = 'navLinks'>DOWNLOAD</a></li>
<li><a href="help.html" class = 'navLinks'>HELP</a></li>
</ul>
</div>
</div>
</nav>
Here's the 'header.html' file that is added and appended to a div with id 'header' on the main search page.

you guessed it right,
it cannot find them because the loaded header links haven't been added to the DOM yet
.load() is asynchronous and has a callback that executes when it's done, that's where you should call your function :
$('#someDiv').load('someHtml.html', getCurrentPage);
note that you have to passe the function by reference ( wihtout () ) otherwise it will be executed before the load() is done.

How do you get when you click each word/name, certain div show?

I'm doing a site where, when I click on the Alagoas word "div_alagoas" appears. When I click on the BAHIA word, "div_alagoas and hide" "div_bahia" show.
In this example, I tested with input Radio and it worked. But I do not know how to work with the tags <li> <a>.
How can I do that?
HTML:
<form>
<li><a name="alagoas" id="ala">ALAGOAS </a></li>
<br>
<li><a name="alagoas" id="ba">BAHIA </a></li>
</form>
<div id="div_alagoas" value="alagoas" style="border:1px solid black">
content
</div>
<div id="div_bahia" value="bahia" style="border:1px solid black">
content
</div>
JQUERY:
$(document).ready(function(){
$(' ??? [name=alagoas]').change(function(){
if(this.id == 'ala'){
$('#div_alagoas').show();
$('#div_bahia').hide();
}
else if (this.id == 'ba'){
$('#div_bahia').show();
$('#div_alagoas').hide();
}
});
});

well, if you want a click listener:
$('[name=alagoas]').click(function(event){
if($(event.target).attr('id') === 'ala'){
$('#div_alagoas').show();
$('#div_bahia').hide();
}
else if ($(event.target).attr('id') === 'ba'){
$('#div_bahia').show();
$('#div_alagoas').hide();
}
});
Another note, your HTML should be better formatted, like putting li tags inside a ul or ol
<ul>
<li><a name="alagoas" id="ala">ALAGOAS </a></li>
<li><a name="alagoas" id="ba">BAHIA </a></li>
</ul>
Another way to do this is splitting into different listeners:
$('#ala').click(function(){
$('#div_alagoas').show();
$('#div_bahia').hide();
});
$('#ba').click(function(){
$('#div_alagoas').hide();
$('#div_bahia').show();
});

Check link click happen within a div

I would like the Javascript returning true when users click on the links within specific div
For example:
When users click on links in div having class="span1", it will return true
<div class="span1">
<h3>Title 3</h3>
<ul class="stages" dir="ltr">
<li><a href="http://www.example.com" >Example 1</a></li>
<li><a href="http://www.example.com" >Example 2</a></li>
</ul>
</div>
<div class="span2">
<h3>Title 4</h3>
<ul class="stages" dir="ltr">
<li><a href="http://www.example.com" >Example 1</a></li>
<li><a href="http://www.example.com" >Example 2</a></li>
</ul>
</div>
Thanks a lot!!

Simply use an if statement for .hasClass:
$("div").click(function(){
if($(this).hasClass("span1")){
alert("SPAN 1 CLICKED");
return true;
}
});
FIDDLE
UPDATE: I read your question too quick, here is a new fiddle which targets your a's instead of the div
NEW FIDDLE
should be this instead:
if($(this).closest("div").hasClass("span1")){

Here in pure Javascript: http://jsfiddle.net/xxx96bta/5/
var links = document.getElementsByTagName('a'); //collect your elements
for (i = 0; i < links.length; i++) {
(function () {
links[i].addEventListener('click', whatSpan, false);
})();
}
function whatSpan() {
var parentspan = this.parentNode.parentNode.parentNode.className;
if (parentspan == "span1") {
alert("you clicked span 1");
} else {
alert("you clicked span 2");
}
}