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!

JQuery onclick function error within post loop

I have a loop of posts in wordpress and I am trying to call a jquery on click show event which will show a contact form for that post when clicked.
The onclick show works only for the first post in the loop where it will display the contact form for that post no problem - but, it does not work for any of the other posts in the loop. Anyone know why this may be? The page with the post loop is https://www.salusa.co.uk/specialist-training-courses/.
The code is roughly:
<div class="archive-posts-loop">
<div class="post">
<div class="enquire">
<a class="show-form">Contact Provider</a>
</div>
<div class="contact-form-wrapper" id="contact-form-wrapper" style="display:none;">
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script>
$(document).ready(
function(){
$(".show-form").click(function () {
$("#contact-form-wrapper").show("fast");
});
$("#close").click(function () {
$("#contact-form-wrapper").hide("fast");
});
});
</script>
</div><!--post-->
<div class="post">
<div class="enquire">
<a class="show-form">Contact Provider</a>
</div>
<div class="contact-form-wrapper" id="contact-form-wrapper" style="display:none;">
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script>
$(document).ready(
function(){
$(".show-form").click(function () {
$("#contact-form-wrapper").show("fast");
});
$("#close").click(function () {
$("#contact-form-wrapper").hide("fast");
});
});
</script>
</div><!--post-->
</div><!--archive-post-loop-->

As you have a new form for each post you need to target the correct form for the post. You can listen for delegated click events and show/hide the nested form accordingly. Note that you do not need (nor should have) the script repeated for each form as shown in your example.
$(function(){
$(".post")
.on("click", ".show-form", function() {
$(this).parents(".post").find(".contact-form-wrapper").show("fast");
})
.on("click", ".close", function() {
$(this).parent().hide("fast");
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="post">
<div class="enquire">
<a class="show-form">Contact Provider</a>
</div>
<div class="contact-form-wrapper" id="contact-form-wrapper" style="display:none;">
[Form here] close
</div>
</div>
<div class="post">
<div class="enquire">
<a class="show-form">Contact Provider</a>
</div>
<div class="contact-form-wrapper" id="contact-form-wrapper" style="display:none;">
[Form here] close
</div>
</div>
<div class="post">
<div class="enquire">
<a class="show-form">Contact Provider</a>
</div>
<div class="contact-form-wrapper" id="contact-form-wrapper" style="display:none;">
[Form here] close
</div>
</div>

You are using multiple elements with the same id of contact-form-wrapper. Instead you need to make each element have a unique id, and then select that id in the respective jquery calls. Jquery will return the first matching element given a selector, which is why it only selects the first post each time.

Here is a codepen that does what you want.
https://codepen.io/abidhasan/pen/wpdoyO?editors=1111
This is the jQuery that you can use - basically look for the sibling and change its style
$(".post .show-form").on("click", function() {
$(this).parent().siblings()[0].style.display= "block";
});
$(".post .hide-form").on("click", function() {
$(this).parent().siblings()[0].style.display= "none";
});

Refresh a div without a full page been refreshed?

Is it possible to refresh a div on a click of a button and not auto refresh?
Once I've printed #print-container I would like to refresh #print-container to its original state without refreshing the whole page.
<body onLoad="renderTime();">
<div class="container-fluid">
<div class="row">
<div class="col-xs-4" id="printarea" >
<div id="print-container">
<div class="item"></div>
<div class="total"></div>
</div>
</div>
<div class="col-xs-8">
<ul class="final">
<li class="remove"><input type="submit" value="Remove Last" class="print-btn remove-item"></li>
<li class="remove"><input type="submit" value="Refresh" class="print-btn" data-corners="false" id="submit" onclick="refresh()"></li>
</ul>
<hr />
</div>
</div>
<div class="row">
<div class="col-xs-12">
<div class="box">
<div class="content">
<ul class="sub-menu">
<li><button class="menu item1">Item 1</button></li>
<li><button class="menu item2">Item 2</button></li>
</ul>
</div>
<!--END BEER-->
</div><!--end box-->
</div>
</div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="js/bootstrap.min.js"></script>
<script type="text/javascript">
$(".menu a").click(function(e){
e.preventDefault();
$(".toggle").hide();
var toShow = $(this).attr('href');
$(toShow).fadeIn(5);
});
</script>
<script type="text/javascript">
//add item
$('.item1').click(function(){
$('<div class="delete">Item 1 - <span class="skill"> 840</span></div><br />').appendTo('.item');
counter();
});
$('.item2').click(function(){
$('<div class="delete">Item 2 - <span class="skill"> 910</span></div><br />').appendTo('.item');
counter();
});
</script>
<script type="text/javascript">
var counter = function() {
var total = 0;
$(".skill").each(function() {
total += + parseInt($(this).text() , 10);
});
$('.total').text('Total: \u0E3F' + total);
};
</script>
<script type="text/javascript">
function refresh() {
setTimeout(function () {
location.reload()
}, 100);
}
</script>
</body>

If your div is loaded from an external source (doesn't matter if it's on the same server or not) you can use the jQuery function load() to "refresh" the div.
For example - if your div loads some content from the file content.html, then you can use jQuery to reload the div's content:
$("#button-id").click(function() {
$("#div-id").load("content.html");
});
It's as simple as that!

Here's a simple plugin that caches div content inside it's own attribute, and reverts back on event
(function($, window){
var nodes = $('[reload]'); // all <div reload=""/> elems
var serializer = new XMLSerializer(); // serializer
nodes.each(function(){ // iterate over all elems
var domStr = serializer.serializeToString($(this)[0]); //serialize html to str
$(this).attr('cache', domStr.replace(/\n/g, '')); // remove new-line
$(this).click(function(){ // event
$(this).html($(this).attr('cache')); // restore content of div
});
});
// demoPurpose: modify div, add attribute(style), change text
$('#style').click(function(){
$(nodes[0]).children().first().css('color', randomColor());
$(nodes[0]).children().last().css('color', randomColor());
$(nodes[1]).children().first().css('color', randomColor());
$(nodes[1]).children().last().css('color', randomColor());
$(nodes[1]).children().last().text(Date.now());
});
// demoPurpose: simple random colorizer
function randomColor(){
var colors = ['red', 'blue', 'green', 'yellow', 'black', 'pink'];
return colors[Math.floor(Math.random() * colors.length)];
}
})(jQuery, window);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div reload="">
<h1>h1</h1>
<p>p</p>
</div>
<hr />
<div reload="">
<h1>another h1</h1>
<p>with dummy p</p>
</div>
<hr />
<p><button id="style">style</button><small>Click on button to change div</small></p>
<p><small>Click on div to reload it's content</small></p>
Although it might seem quite heavy, this should help you to understand the idea behind

Calling a method to Expand and Collapse a section

I am using Simple-Expand http://redhotsly.github.com/simple-expand/ to expand and collapse sections in the HTML page.
JQuery code :
$(function () {
$('.hello').simpleexpand();
});
$(function () {
$('.bye').simpleexpand();
});
HTML :
<a href='' id='hello' class='hello'> Hi </a>
<a href='' id='bye' class='bye'> Bye </a>
Div :
<div class="content">
Hello
</div>
<div class="content">
Bye
</div>
When i click on the link with the class hello, Only the DIV tag with the text Hello should be called, and when i click on the link Bye, the DIV tag with the text Bye should be displayed. How can i do this ?

It is all in the doc you posted : http://sylvain-hamel.github.io/simple-expand/
You have to specify options in your call to the simpleexpand method
For example :
$(function () {
$('.hello').simpleexpand({'defaultTarget': '.helloDiv'});
});
$(function () {
$('.bye').simpleexpand({'defaultTarget': '.byeDiv'});
});
and your html :
<div class="helloDiv">
Hello
</div>
<div class="byeDiv">
Bye
</div>

try this:
JQuery code :
$(function () {
$('a').click(function(){
var id = $(this).attr('id');
var divId = 'div_' + id;
$('#'+divId).simpleexpand();
});
});
HTML :
<a href='' id='hello'class='hello'> Hi </a>
<a href='' id='bye' class='bye'> Bye </a>
Div :
<div class="content" id='div_hello'>
Hello
</div>
<div class="content" id='div_bye'>
Bye
</div>

jquery toggle between divs and subsequently hide active div

a play on a similar question asked by me that was graciously answered.
three divs, all hidden. jquery toggles between them via different links. this works great! now, i'd like to clink the link corresponding to the active div and hide it, esentially the same as when the page loads with all of them hidden. right now it fades out and back in.
help! thank you!
HTML:
<div id="nav">
<a class="home" id="show_about" title="About">ABOUT</a><br />
<a class="home" id="show_subscribe" title="Subscribe">SUBSCRIBE</a><br />
<a class="home" id="show_contact" title="Contact">CONTACT</a>
</div>
<div id="content">
<div class="current" id="about">
<p>ABOUT's content</p>
</div>
<div id="subscribe">
<p>SUBSCRIBE's content</p>
</div>
<div id="contact">
<p>CONTACT's content</p>
</div>
</div>
Javascript:
$(function(){
$('#about').css('display', 'none');
$('#subscribe').css('display', 'none');
$('#contact').css('display', 'none');
});
$('.home').click(function(){
var id = $(this).html().toLowerCase();
$('.current').fadeOut(600, function(){
$('#'+id).fadeIn(600);
$('.current').removeClass('current');
$('#'+id).addClass('current');
});
});

Try this out..
Since on fadeOut the current class is removed, if the size of current is 0 it means nothing is selected. We can simply fadeIn the content div.
$('#about, #subscribe, #contact').hide();
$('.home').click(function() {
var id = $(this).html().toLowerCase();
var $content = $('#' + id + ':not(:visible)');
if ($('.current').length === 0) {
showContent($content)
}
else {
$('.current').fadeOut(600, function(){showContent($content)});
}
});
function showContent(content) {
content.fadeIn(600);
$('.current').removeClass('current');
content.addClass('current');
}
Example on jsfiddle.

Here is another approach:
$(function(){
$('#content div').hide();
});
$('.home').click(function(){
var targetSelector = '#' + $(this).attr('title').toLowerCase();
var targetShown = $(targetSelector).is(':visible');
if (targetShown) {
$(targetSelector).fadeOut(600);
} else {
$('#content div:not(' + targetSelector + ')').fadeOut(600,
function() {$(targetSelector).fadeIn(600)});
}
});

Check to see if the id of the clicked element is equal to the id of the element currently being displayed (i.e. the element with the current class). If it is a different element, then a swap needs to take place. If it is the same element, then it needs to be hidden and have its current class removed...
(Edit: fixed code)
HTML:
<div id="nav">
<a class="home" id="show_about" title="About">ABOUT</a><br />
<a class="home" id="show_subscribe" title="Subscribe">SUBSCRIBE</a><br />
<a class="home" id="show_contact" title="Contact">CONTACT</a>
</div>
<br />
<br />
<br />
<div id="content">
<div id="about">
<p>ABOUT's content</p>
</div>
<div id="subscribe">
<p>SUBSCRIBE's content</p>
</div>
<div id="contact">
<p>CONTACT's content</p>
</div>
<div class="current" id="dummy"></div>
</div>
JS:
$().ready(function()
{
$('#about').hide();
$('#subscribe').hide();
$('#contact').hide();
$('#dummy').hide();
$('.home').click(function() {
var id = $(this).html().toLowerCase();
if ($('.current').length >0) {
if($('.current')[0].id.toLowerCase() != id)
{
$('.current').hide();
$('.current').removeClass('current');
$('#'+id).addClass('current');
$('#'+id).show();
}
else
{
$('.current').hide();
$('.current').removeClass('current');
$('#dummy').addClass('current');
}
}
});
});
Just replace the .hide()'s and .shows()'s with fades in and out.