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!

Toggle display shows the hidden element for a second

I'm trying to show a hidden text on click of a button. But when I load the page, the text shows for a second and then disappears. Why would that happen?
<div class="container">
<p class="temp">This is temporary</p>
<button id="showme">Show</button>
</div>
$(document).ready(function() {
$(".temp").hide();
$("#showme").on("click", function() {
$(".temp").show();
});
});

Try to understand how the webpage loads. Your jquery is executed when the entire page is rendered with the associated CSS. So the browser displays your text for a second till it executes jquery to hide that text. So your browser needs to know that this text is hidden while parsing the html. You can do this by giving a CSS style to the text.
CSS:
.temp {
display: none;
}
HTML:
<div class="container">
<p class="temp">This is temporary</p>
<button id="showme">Show</button>
</div>
JS:
$(document).ready(function() {
$("#showme").on("click", function() {
$(".temp").show();
});
});

You should use inline style tag in <p> tag like this:
<p class="temp" style="display: none;">This is temporary</p>
instead of hiding it from jQuery!
$(document).ready(function() {
$("#showme").on("click", function() {
$(".temp").show();
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
<p class="temp" style="display: none;">This is temporary</p>
<button id="showme">Show</button>
</div>

jQuery .click() not working, while other jQuery functions do

I'm trying to create a Greasemonkey userscript that will click on one of the divs on the page. They don't refer to a link, more likely a JS/Ajax function, but I can't tell if that is true. So the problem is that this script does nothing. Jquery functions like .remove() work, but .click() does not. What exactly is wrong? I tried searching questions on this topic, but none seemed to help.
Code on page:
<div style="display: block;" class="oitm">
<div class="item">
<img class="smallimg" src="">
</div></div>
<div style="display: none;" class="oitm">
<div class="item">
<img class="smallimg" src="">
</div></div>
My code:
$( document ).ready(function() {
var reqItem = $('.oitm[style*="display: block"]');
$(reqItem).click();
});
Please note, that
reqItem.click();
does not work as well.
Upd: there is also a jquery code, but it's placed outside of the elements I posted above (#offer.left is an element where a clicked item is supposed to show up after it's clicked).
<script>
$("#offer").on( "click", ".item", function() {
if ($('#offer .left').children().size() < 9) {
$(this).parent().appendTo('#offer .left');
}
});
</script>

Your code works as expected: http://jsfiddle.net/5zddqx28/ .
JS:
$( document ).ready(function() {
$('.oitm[style*="display: block"]').click(function() {
alert('clicked');
});
var reqItem = $('.oitm[style*="display: block"]');
$(reqItem).click();
});
Make sure you put onclick listener before your .click(); call.

Your code works fine:
<div style="display: block;" class="oitm">
<div class="item">Top Div
<img class="smallimg" src="">
</div>
</div>
<div style="display: none;" class="oitm">
<div class="item">Bottom Div
<img class="smallimg" src="">
</div>
</div>
$( document ).ready(function() {
var reqItem = $('.oitm[style*="display: block"]').click();
$(reqItem).on('click',function(){ alert('I was clicked'); });
$(reqItem).click();
});
https://jsfiddle.net/7xnLoumt/

A selector that looks at the style attribute only works for browsers that format the style in exactly that way, or leaves the attribute in the original format when the code is parsed. You can use the :visible selector to find the visible elements:
var reqItem = $('.oitm:visible');

Clone and append on click makes multiple elements and toggle not working

I am trying to clone and append elements. after i append i have added a toggle animation. on first click it works fine. after i am getting mutliple elements appended.
as well the animation not working.
here is the html:
<div class="parent hide">
<div class="header">
<h6>Header</h6>
</div>
<div class="content">
<p>paragraph content </p>
</div>
</div>
<div id="content">
</div>
<button>Add</button>
Js :
$('.parent').on('click', '.header', function () {
$(this).find('h6').toggleClass('name').end()
.siblings('.content').slideToggle();
});
$('button').on('click', function () {
var newParent = $('.parent').clone();
$('#content').append(newParent.removeClass('hide'));
});
JSfiddle
UPDATE:
I updated the cloning passing var newParent = $('.parent').clone(true); - animation works!

you should clone only the first element (or the last for that matter):
var newParent = $('.parent:first').clone(true);
EXAMPLE 1
Using .clone(true) seems to fix the animation. Another solution is targeting the parent on click and delegating .parent .header since the cloned .parent is being added to the DOM after the initial load:
$('#content ').on('click', '.parent .header', function () {
instead of
$('.parent').on('click', '.header', function () {
EXAMPLE 2

Cloning an elements means there will be two identical elements (having the same class aswell) afterwards.
Each time you click the button, all elements having the .parent class are cloned and appended to the #content
Regarding the animation:
The appended elements are not known to the DOM, so the .on('click') is not working.
Try to put a wrapper around your .parent elements and then use the following syntax:
HTML
<div class="wrapper">
<div class="parent hide">
<div class="header">
<h6>Header</h6>
</div>
<div class="content">
<p>paragraph content </p>
</div>
</div>
<div id="content">
</div>
</div>
<button>Add</button>
JS
$('.wrapper').on('click', '.parent .header', function(){ [...] });

Constrain toggle effect

I've put this jQuery together, when the document is ready the div with a class of bio.read_more is hidden.
The default behaviour for the a tag is removed with e.preventDefault
When btn.expand_bio is clicked bio.read_more is displayed.
The only problem is all the bio.read_more divs are displayed? I only want the one that's related to expand. Can anyone help?
$(document).ready(function(){
$(".bio.read_more").hide();
$(".btn.expand_bio").click(function(e){
e.preventDefault();
$(".bio.read_more").toggle();
});
});
(update) Added HTML
<div class="bio intro">
<p>Intro paragraph</p>
<a class="btn expand_bio" href="#">Read more</a>
</div>
<div class="bio read_more">
<p>Expanded text here</p>
</div>
</div>

Use this as reference to the element being clicked.
$(document).ready(function() {
$(".bio.read_more").hide();
$(".btn.expand_bio").click(function(e) {
e.preventDefault();
$(this).closest('.bio.intro').next('.read_more').toggle();
});
});