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!

On click, find next element by class name

I have a mobile menu, and when the user clicks the span with the class of "open", the next footer-menu-accordion opens. However, it also opens when the user clicks on the anchor link "level-1" Men.
What I am trying to do right now, is when the user clicks Men I would like to use jquery to find the NEXT footer-menu-accordion and keep it as display:none (which is the parent div containing the level-2 anchor tags). I know I have to use jquery's next() or find() methods, but I'm not sure how to do it. Can anyone help me out?
function mobileMainNav() {
$('a.level-1.direct').click(function(e) {
window.location = $(this).attr('href');
});
}
mobileMainNav();
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="mobile-menu" class=" footer-menu-accordion ">
<div class="dropdown-container ">
<a class="level-1 direct">Men</a>
<span class="open">img</span>
</div>
<div class="footer-menu-accordion ">
<a class="level-2 "></a>
<ul></ul>
<a class="level-2 "></a>
<ul></ul>
<a class="level-2 "></a>
<ul></ul>
</div>
</div>
I wrote this so when I click on level-1, I am directed to the "mens" section of my website. This works fine, however when I clicik level-1 I do not want the next dropdown to open, which it currently does. So I know I need to add some more jquery into this function to do so, I'm just not sure how as I am new to jQuery. Thank you in advance!

I'm not sure if you want to get the nearest footer for your anchor tag with the class level-1 or not ... if so try this :
function mobileMainNav() {
$('a.level-1').click(function(e) {
var nearestFooter = $(this).parent().siblings('div.footer-menu-accordion');
console.log(nearestFooter[0]);
});
}
mobileMainNav();
<div id="mobile-menu" class="footer-menu-accordion">
<div class="dropdown-container">
<a class="level-1">Men</a>
<span class="open">img</span>
</div>
<div class="footer-menu-accordion">
<a class="level-2"></a>
<ul></ul>
<a class="level-2"></a>
<ul></ul>
<a class="level-2"></a>
<ul></ul>
</div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
also you don't have element with the class (.direct)

same navbar with unique heading loaded

I want to create a website which will carry out the same navbar on each webpage. I Have managed to create the same navbar all over using simple jquery techniques. My navbar has a sidebar element with bootstrap styling incorporated. to the right of the sidebar, I have to generate unique heading which corresponds to the webpage click on the navbar. I would like to know is it a way out to create different headings using javascript or jquery.
nav.html:
<div class="container-fluid">
<div class="row">
<div class="col-md-2 col-sm-4 sidebar1">
<div class="logo">
<img src="images/group_logo.jpg" class="img-responsive align-middle" alt="Logo">
<hr align="left" width="200px;">
</div>
<br>
<div class="left-navigation">
<ul class="list">
<!--<h5><strong>Actionlist</strong></h5>-->
<li><i class="glyphicon glyphicon-th-large"></i>Dashboard</li>
<li><i class="glyphicon glyphicon-certificate"></i>Seating</li>
<li><i class="glyphicon glyphicon-book"></i>Report</li>
</ul>
</div>
</div>
<div class="col-md-10 col-sm-8 main-content">
<!--Main content code to be written here -->
<h1>
<i class="glyphicon glyphicon-menu-hamburger"></i>
Dashboard
</h1>
<hr align="left" width="100%">
<!-- Create action buttons -->
</div>
</div>
</div>
In index.html I have the below code under body tag to load the container. How can I create the unique heading for different HTML pages?
<div id="nav-placeholder"></div>
<script>
$.get("nav.html", function(data) {
$("#nav-placeholder").replaceWith(data);
});
</script>

You can use the filename to set the header once the page is loaded.
<h1>
<i class="glyphicon glyphicon-menu-hamburger"></i>
<span id="nav-placeholder">Dashboard</span>
</h1>
And then use the script like this -
<script>
$(document).ready(function() {
var navPlaceholder= "";
var url = window.location.pathname;
var filename = url.substring(url.lastIndexOf('/')+1);
switch(filename) {
case "seaing.html":
navPlaceholder = "Seating";
break;
case "report.html":
navPlaceholder = "Report";
break;
default:
navPlaceholder = "Dashboard";
break;
}
$("#nav-placeholder").replaceWith(navPlaceholder);
});
</script>

Untested, but this should give you the idea and steer you in the right direction.
Store the link in a variable;
Store the title of the link in a variable;
Demonstration:
<script>
$('.left-navigation a').on('click', function(){
var getUrl = $(this).attr('href'),
getTitle = $(this).text();
/* Log variable to console - remove for production */
console.log('The Url:',getUrl);
console.log('The Title:',getTitle);
$.get(getUrl, function(data) {
$("#nav-placeholder").replaceWith(data);
$('#page-title').text(getTitle); /* Update the page title */
});
});
</script>
To target the right element in order to update the page title, update your html structure as follows:
<h1><i class="glyphicon glyphicon-menu-hamburger"></i> <span id="page-title">Dashboard</span></h1>
We don't want the script to remove the glyphicon icon nested within your h1 element, so we wrap the text that needs to update in an element we can target specifically (#page-title).

how to use classes to refer to the correct element in jquery

I have cards displayed on the website. I want to display a label on whichever card I am currently hovering on.
main.js
$('.card').on("mouseover", function () {
$('.ui.right.corner.label').show();
});
$('.card').on("mouseout", function () {
$('.ui.right.corner.label').hide();
});
This appeared to work fine until I realised that specific card's label is shown every time I hover on ANY of the cards.
Index.php
<!--first card-->
<div class="card" onclick="window.location='product.php';">
<img src="img/test1.jpg" class="image">
<a class="ui right corner label">
<i class="heart icon"></i>
</a>
</div>
<!--second card-->
<div class="card" onclick="window.location='product.php';">
<img src="img/test2.jpg" class="image">
<a class="ui right corner label">
<i class="heart icon"></i>
</a>
</div>
<!--third card-->
<div class="card" onclick="window.location='product.php';">
<img src="img/test3.jpg" class="image">
<a class="ui right corner label">
<i class="heart icon"></i>
</a>
</div>
I have currently fixed the child element problem by using Rajaprabhu's answer. However, the label is now appearing on the website by default. I am using .hide to hide them but is there a better way to not show the label when website is loaded?

That is because you are showing and hiding all the elements with that particular class. Try this method.
$('.card').on("mouseover", function () {
$(this).children("a").show();
});
$('.card').on("mouseout", function () {
$(this).children("a").hide();
});

You have to use the this reference inside of those event handlers,
$('.card').on("mouseover", function () {
$('.ui.right.corner.label', this).show();
});
$('.card').on("mouseout", function () {
$('.ui.right.corner.label', this).hide();
});

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>