We Keep Coding

Is this a stable way to show/hide a div and a certain "id" using jQuery or could I use a better approach?

I have two containers, one is a page of link blocks and a have another container hidden. In the hidden container there is articles that link to the main pages link blocks. So user "clicks" LINK ONE in the main container which then hides the main container, shows the originally hidden container and ONLY displays the id article it is linked to. There is then a "back to library" button which will take you back to the main container and set everything back to square one. I have it working at the moment but I'm not sure if it is the right way to achieve this? I know there is no right or wrong and if it works, it works but just wondering for peace of mind. Thanks :)
CODEPEN: https://codepen.io/mDDDD/pen/ZEObRdR
HTML:
<div class="container--article-blocks" id="articleBlocks">
<div class="article-block">
<a class="show-article" href="#articleOne">LINK ONE</a>
</div>
<div class="article-block">
<a class="show-article" href="#articleTwo">LINK TWO</a>
</div>
<div class="article-block">
<a class="show-article" href="#articleThree">LINK THREE</a>
</div>
</div>
<!-- articles -->
<div class="container--articles" id="articles" style="display: none;">
back to Library
<div id="articleOne" class="article-block-articles">One</div>
<div id="articleTwo" class="article-block-articles">Two</div>
<div id="articleThree" class="article-block-articles">Three</div>
</div>
jQuery:
$('.show-article').on('click', function (e) {
e.preventDefault();
var id = $(this).attr('href');
$(id).show().siblings('div').hide();
$('#articleBlocks').fadeOut();
setTimeout(function () {
$('#articles').fadeIn();
}, 500);
});
$('.back-to-library').on('click', function (e) {
e.preventDefault();
$('#articles').fadeOut();
setTimeout(function () {
$('#articleBlocks').fadeIn();
}, 500);
});

Consider using the callback for .fadeOut() to then call .fadeIn(). Nothing wrong with that you did, this will just ensure the item is faded out before executing further code.
$(function() {
$('.show-article').on('click', function(e) {
e.preventDefault();
var id = $(this).attr('href');
$(id).show().siblings('div').hide();
$('#articleBlocks').fadeOut(500, function() {
$('#articles').fadeIn();
});
});
$('.back-to-library').on('click', function(e) {
e.preventDefault();
$('#articles').fadeOut(500, function() {
$('#articleBlocks').fadeIn();
});
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="container--article-blocks" id="articleBlocks">
<div class="article-block">
<a class="show-article" href="#articleOne">LINK ONE</a>
</div>
<div class="article-block">
<a class="show-article" href="#articleTwo">LINK TWO</a>
</div>
<div class="article-block">
<a class="show-article" href="#articleThree">LINK THREE</a>
</div>
</div>
<!-- articles -->
<div class="container--articles" id="articles" style="display: none;">
back to Library
<div id="articleOne" class="article-block-articles">One</div>
<div id="articleTwo" class="article-block-articles">Two</div>
<div id="articleThree" class="article-block-articles">Three</div>
</div>

You can make the visibility: hidden; after an event!
Actual example
document.getElementById("XXX").style.visibility = "hidden";
But actually, your project is just fine!
For more info, go here https://www.w3schools.com/jsref/prop_style_visibility.asp
This explains the HTML DOM visibility property!

Need to get text of parent's div when child's div is clicked

Here when I am clicking on More Info. I want an alert showing the value present inside h3 tags. How can I do that ??
Here is the html i am working on
<div class="col-lg-4 col-xs-6">
<div class="small-box bg-red">
<div class="inner">
<h3>Text 1</h3>
<p>fhjh</p>
</div>
More info <i class="fa fa-arrow-circle-right"></i>
</div>
</div>

so what you want is to click on the small-box-footer link and alert the 'Text 1'?
$(document).ready(function(){
$('.small-box-footer').on('click', function(evt){
//if you don't want the default event
evt.preventDefault();
//show the alert text
alert($('.inner h3').text());
})
})

you can try code below
$(document).ready(function(){
$('.small-box-footer').on('click', function(e){
e.preventDefault();
alert($(this).parents('.small-box').find('h3').text());
})
})
Working Demo

you can try :
$('.small-box-footer').click(function(e){
var text = $(this).prev().children().first().text();
console.log(text);
});

you need to have an event listener for the onclick event when someone clicks on the "more info".
you'll then need to get the closest query the dom (you can traverse upwards or alternatively go from the DOM straight to a specific element... it's cheaper to go up).
example...
Using Jquery
$('.small-box-footer').click(function(ev) {
ev.preventDefault();
// find the h3
var text = $('.inner h3').text();
alert(text);
});

Simple as just grabbing the h3 directly, skip traversing:
window.showTitle = function() {
alert($('h3').text())
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="col-lg-4 col-xs-6">
<div class="small-box bg-red">
<div class="inner">
<h3>Text 1</h3
<p>fhjh</p>
</div>
<a href="#" class="small-box-footer" onclick="showTitle()">More info <i class="fa fa-arrow-circle-right"></i>
</a>
</div>
</div>

How to select dynamically created ajax element

Quick question. I've got html code like that:
<li class='entry'>
<div class='entryContent'>
<p class='entryText'>Entry text></p>
<a href="#" class='entryReply'>Reply</a>
</div>
</li>
When I click on Reply a div with reply form is being appended to 'entry'.
So it looks like:
<li class='entry'>
<div class='entryContent'>
<p class='entryText'>Entry text></p>
<a href="#" class='entryReply'>Reply</a>
</div>
<div class='replyForm'>
//form stuff
</div>
</li>
Now what I want to do is to create user-script which will find that dynamic div.replyForm and append some stuff into it:
<li class='entry'>
<div class='entryContent'>
<p class='entryText'>Entry text></p>
<a href="#" class='entryReply'>Reply</a>
</div>
<div class='replyForm'>
//form stuff
//MyAppendedStuff
</div>
</li>
I've already tried
$("body").on("focus", ".replyForm", function(){
$(this).append('<span>Hello World!</span>');
});
but it didn't work.
Any ideas?

You are creating a focus listener for div.replyForm. You probably want to bind the listener to the form inputs, instead. Something like this:
$('body').on("focus", "div.replyForm input", function () {
$('div.replyForm').append('<span>Hello World!</span>');
});
Working Example (jsfiddle)

output a value to html multiple classes javascript

It seems i can't get an output to appear in multiple id's or even appear at all in a class.
please see js fiddle below. Any help would be super useful. Thanks in advance
http://jsfiddle.net/KgY9T/201/
//javascript
var searchBox = document.getElementById("searchOutput");
searchBox.appendChild(document.createTextNode('testlol'));
//or
var searchBox = getElementsByClassName("searchOutput");
searchBox.appendChild(document.createTextNode('textnolols'));
<div id="searchBox">
<div class="searchBoxModule">
<a id='searchOutput'></a>
</div>
<div class="searchBoxModule">
<a id='searchOutput'></a>
</div>
<div class="searchBoxModule">
<a id='searchOutput'></a>
</div>
</div>
<br>
or
<br>
<div id="searchBox">
<div class="searchBoxModule">
<a class='searchOutput'></a>
</div>
<div class="searchBoxModule">
<a class='searchOutput'></a>
</div>
<div class="searchBoxModule">
<a class='searchOutput'></a>
</div>
</div>
Thanks,
Ewan

never use same ID more than once..
Then, your closest approach was set a common class and try to modify them, but, when you create the var searchBox you are creating an array with all the elements founds.
When you try to modify in any way, you need to treat them like an array and loop over. (could be the same for all of them or something specific for each.)
So, as #Shay Elkayam point it out... made a loop and work with that, that's fine.
But remember... Multiple classare rigth.. one id always.
<script type="text/javascript">
window.onload=function(){
// crate an array with all elements found
var searchBox = document.getElementsByClassName("searchOutput");
// now, loop over the array and do what you need
for( var i in searchBox) {
// appendchild for each obj. in array
searchBox[i].appendChild( document.createTextNode('textnolols') );
}
}
</script>
<div id="searchBox">
<div class="searchBoxModule">
<a class='searchOutput'></a>
</div>
<div class="searchBoxModule">
<a class='searchOutput'></a>
</div>
<div class="searchBoxModule">
<a class='searchOutput'></a>
</div>
</div>
jsFiddle update: http://jsfiddle.net/KgY9T/203/
Furder reader: https://developer.mozilla.org/en-US/docs/Web/API/document.getElementsByClassName

I've updated your fiddle as follows:
var searchBox = document.getElementsByClassName("searchOutput");
for(i=0;i<searchBox.length;i++){
searchBox[i].appendChild(document.createTextNode('textnolols'));
}
link:
http://jsfiddle.net/KgY9T/202/

Retrieve child node from parent node

I have created a document with html. I want to retrieve child node from the root node for that I am using following code...
That is HTML.
<a id="Main1" onclick="RetrieveElement(this);">Test1
<div name="Top1">
</div>
<div name="Middle1">
I'm Middle.
</div>
<div name="Bottom1">
</div>
</a>
<a id="Main2" onclick="RetrieveElement(this);">Test2
<div name="Top1">
</div>
<div name="Middle1">
I'm Middle.
</div>
<div name="Bottom1">
</div>
</a>
javascript.
function RetrieveElement(element){
alert(this.getElementByName("Middle1").innerHTML);
}
However, That is not working. I have tried finding the problem but cant solve it... Any help ?

If you want to get the first child element only:
var element = document.getElementById('Main1').children[0];
If you want to get the first anchor element:
var element = document.getElementById('Main1').getElementById('Middle1');

getElementById is a method of Document, not Element. Try this:
<script type="text/javascript">
function RetrieveElement(element){
window.alert(document.getElementById("Middle1").innerHTML);
}
</script>
<a id="Main1" href="#" onclick="RetrieveElement(this);">Test1</a>
<div id="Top1">
</div>
<div id="Middle1">
I'm Middle.
</div>
<div id="Bottom1">
</div>

Can you use jQuery?
It would be as easy as this