We Keep Coding

Why I cant get to hidden article by putting url with hashname?

I have been looking for solution, but i don't find anything, that would suit me. I got a page with header and content divs. Content div is not visible. After clicking on item in nav menu, I want to hide header, and show chosen article. I achieved it, but when I try to get to article by url#name nothing happens.
"jsfiddle" wont be useful in this case, but i will paste it to show my code.
Is there different way to do it? Maybe somehow hide articles with code, then just change opacity, maybe use "addclass" from jquery? I don't really know, im mixed and stuck.
Thanks for help.
https://jsfiddle.net/edby86ta/8/

You can also do it in full css :
https://jsfiddle.net/edby86ta/11/
In this case, the hardest part is hiding it again. You'd have to have a "close" button directing to another (maybe nonexistant) anchor :
Close

You can apply very simple JS conditions to show and hide your articles based on the link, I`ve updated you JSfiddle.
https://jsfiddle.net/edby86ta/10/
$(function () {
//GET HASH FROM URL, CHECK IF ELEMENT EXISTS AND THEN SHOW IT
$(document).ready(function(){
var hash = window.location.hash;
if(hash.length){
$(hash).show();
}
})
$(".article-nav a").on("click", function () {
$(".main-article").hide();
console.log($(this).attr("id"));
$('#article-' + $(this).attr("id")).show();
});
});
article {
display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<header>
<nav>
<ul class="article-nav">
<li><a id="1" href="#article-1">Article 01</a></li>
<li><a id="2" href="#article-2">Article 02</a></li>
</ul>
</nav>
</header>
<div id="content">
<article id="article-1" class="main-article">Article 01 Lorem ipsum</article>
<article id="article-2" class="main-article">Article 02 Lorem ipsum</article>
</div>
<footer></footer>
Advice: Be aware that the user can change the hash as he wants, injecting anything to your selector, you should check the hash before using it.

Can I show one div, hide all others, based on clicking its assigned button?

This seems to be a common question, however when I check the answers, they're all different.
I have a row of five links. Each has a corresponding div below. When I click a links, I want its div to display and all others to hide.
Here's some code I came across that seems to be on the right track:
$('a').on('click', function(){
var target = $(this).attr('rel');
$("#"+target).show().siblings("div").hide();
});
But if I use "a" without a destination, clicking the link takes me to the top of the page. I just want the divs below to show or hide...
Can I use "button" or "div" instead of "a"? If so, what would I use instead of "rel"?
Sorry for the noob question. I just can't seem to make any of the solutions I've found here work for my site. What's the simplest way to do this?
Here's some HTML that definitely works with the jquery script above:
$('a').on('click', function() {
var target = $(this).attr('rel');
$("#" + target).show().siblings("div").hide();
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
Week 3
Week 4
<div>
<div id="week_3" style="display: none">[..xz.]</div>
<div id="week_4" style="display: none">[...]</div>
</div>
However if my href="", clicking that link bounces me up to the top of my page for some reason. So I'd rather use a clickable div or a button rather than a hotlink. In which case, what can I use in the script instead of "rel"?

It seems you only need to prevent the default behaviour by adding e.preventDefault();
$('a').on('click', function(e) {
e.preventDefault();
var target = $(this).attr('rel');
$("#" + target).show().siblings("div").hide();
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
Week 3
Week 4
<div>
<div id="week_3" style="display: none">[..xz.]</div>
<div id="week_4" style="display: none">[...]</div>
</div>

You can use below values on your href.
Anchor
Here is the complete explanation for javascript:void(0)
The JavaScript void operator evaluates the given expression and then
returns a value of undefined. https://www.quackit.com/javascript/tutorial/javascript_void_0.cfm

Try using href="javascript:" or href="#" instead of leaving the attribute empty. href="" tells the browser to reload the current page that you are in, which is why it bounces you to the top of the page.
You can also use <button> or <div>, the effect will not be very different from using <a>. You can also use rel if you are using <button> or <div>. In fact, it is arguably better to use rel on <button> and <div> because the attribute does not have any functional purpose in those tags. On the contrary, <a> uses the rel attribute to specify a few things to browsers.

Target attribute does not suitable for divs it is only for windows or iframes. Also, hyperlink should has href attribute otherwise it will be an anchor or placeholder link in HTML5 specifications.
You may use any conjugation attributes between the link and its div such as link title will be div id.
Example:
Show DIV 1
Show DIV 2
Show DIV 3
<div id="div1" class="linked-div" style="display: none"> One</div>
<div id="div2" class="linked-div" style="display: none"> Two</div>
<div id="div3" class="linked-div" style="display: none"> Three</div>
<script>
$("a").click(function(){
divId = $(this).attr("title");
$(".linked-div").each(function(){
if ($(this) == $("#"+divId)){
$(this).show()
}
else{
$(this).hide()
}
})
$("#"+divId).show();
})
</script>
DEMO

show/hide div with dyamically assigned class

I am dynamically assigning the div id based on the api call back data. For example I have a bunch of data returned which is appended to a div and I can assign the div id with a unique ip address. I have full control over what I can assign i.e. DIV id or class or whatever..
I have attached an example of what the output looks like and hopefully it will clarify what i am looking for.
What I want to be able to achieve is when an endpoint link is clicked, it will show the respective div and hide all other DIV data boxes.. The endpoint links can made clickable and i can add onclick scripts to them or whatever needs to be done
Whether we use the div id or class name i am not fussed.

This should work just fine.
Assign your div with a class, in the demo i'm using EndPoint. The onclick function will use the class to find the div element and hide it. Then it will use this the element used to trigger the function, target the div within that element and show it.
$('.EndPoint').on('click', function () {
$('.EndPoint').find('div').hide();
$(this).find('div').show();
});
.EndPoint div{display:none;}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="EndPoint">
End Point [0]
<div><b>IP Address:</b> 216.12.145.20</div>
</div>
<div class="EndPoint">
End Point [1]
<div><b>IP Address:</b> 172.230.105.123</div>
</div>
<div class="EndPoint">
End Point [2]
<div><b>IP Address:</b> 206.204.52.31</div>
</div>
If you don't understand anything please leave a comment below and I will get back to you as soon as possible.
Edit - jQuery Append with onclick
var IPs=["216.12.145.20","172.230.105.123","206.204.52.31"];
//Foreach value in array
$.each(IPs, function(i,v) {
//Append to id:container
$('#container').append('<div class="EndPoint">End Point ['+i+']<div><b>IP Address:</b> '+v+'</div></div>');
});
$('.EndPoint').on('click', function () {
$('.EndPoint').find('div').hide();
$(this).find('div').show();
});
.EndPoint div{display:none;}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="container"></div>
I hope this helps. Happy coding!

Since elements are dynamically generated it's better to do with classes IMO.
HTML
<div id="endpoint1">
<a href='#' class='clicker'>End Point 1</a>
<p class='hideThis'>1.1.1.1</p>
</div>
<div id="endpoint2">
<a href='#' class='clicker'>End Point 2</a>
<p class='hideThis'>1.1.1.1</p>
</div>
<div id="endpoint3">
<a href='#' class='clicker'>End Point 3</a>
<p class='hideThis'>1.1.1.1</p>
</div>
JavaScript (using JQuery)
$('.clicker').on('click', function () {
$('.hideThis').hide();
$(this).next().show();
});
http://jsfiddle.net/ksvexr40/1
If you want to hide the content initially, just add the following CSS class which hides the content initially.
.hideThis{
display: none;
}

Show/hide a div with jquery multiple times

I am wanting to use jquery to do a show/hide of a DIV from a text link.
What makes it a little different from the examples I have found of this site so far is I need a generic way of doing it multiple times on 1 page and also able to use it sitewide on anypage.
It would be really nice if I can put the JS in seperate file that is included into the pages, so maybe it can be wrapped into a function?
Can someone help me here? For making it generic it could be where I assign a div that is shown/hidden with an id like id="toggle-hide-1" and just change the numbers in my page to make it a different show/hide area
I could just name the ID using a name that will make the function show/hide a div and to seperate it from other divs that show/hide on a page I could add a number to it.
below is partial code that will do a show/hide of a div on a link click but is not exactly what I need.
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script type="text/javascript" >
$(function() {
$(".view-code").click(function(evt) {
$(".tool_block, .view-code").toggle();
});
});
</script>
<a href="#" class="view-code" >view code</a>
hide code <br />
<div class="tool_block" style="display:none" >
this stuff is hidden until we choose to show it!
</div>

The best approach is probably going to be something using custom attributes. If you markup your anchor with an attribute that tells the jquery which div to toggle, it will be easier to write generic code to do the work.
Something like this:
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script type="text/javascript" >
$(function() {
$(".view-code").click(function(evt) {
var d = $(this).attr("toolDiv");
$(".tool_block[toolDiv=" + d + "], .view-code[toolDiv=" + d + "]").toggle();
});
});
</script>
<a href="#" class="view-code" toolDiv="1" >view code</a>
hide code <br />
<div class="tool_block" toolDiv="1" style="display:none" >
this stuff is hidden until we choose to show it!
</div>
Then give each of your anchor-div pairs a unique toolDiv value (doesn't have to be a number).

If you could wrap the whole collection in a div, it would make it pretty easy.
$(function() {
$(".view-code").click( function(e) {
$(this).siblings().andSelf().toggle();
});
});
<div>
<a href="#" class="view-code" >view code</a>
hide code <br />
<div class="tool_block" style="display:none" >
this stuff is hidden until we choose to show it!
</div>
</div>
If it doesn't handle the <br />, you could filter the siblings to only div and anchor elements.

Why not use specific classes instead? Each element you want shown/hidden can have a class called "toggler," as in:
<div class="toggler">
...
</div>
You can then toggle the visibility of ALL elements with this class at once, with:
$(".toggler").toggle();
In this scenario, it doesn't make a difference where in the document these elements reside or even what kind of elements they are.
If this functionality needs to be available globally, you can always extend jQuery itself with a custom function, as in:
$.toggleTogglers = function(toggleClass) {
$("." + toggleClass).toggle();
};
This is nice in that you have flexibility to choose a toggle custom class of your own design.

Is it better to hook up links to a JS function using ID's or "relative paths"?

You know the drill... say you have a list of links and corresponding divs. You want to show the div when the link is clicked -- so you want to get a reference to the div so you can hook an event up on the link.
When you're setting up your events, is it better to hook things up using unique ids like:
Foo
...
<div style="display: none;" id="div123"/>
or, to use some sort of parent.childnodes "relative path" to walk the DOM and get the proper reference to the div from the a?
Assume, for the purpose of this example, that the target div is a few levels removed in DOM from the link. Javascript libraries are totally kosher for this, YUI especially (but all are welcome).

Your first suggestion seems to be easiest. If you're dynamically generating the pages then you can easily ensure that all your pairs match.
Why not do something like this:
Foo
...
<div style="display: none;" id="div123"/>
So that it'll degrade more gracefully?
If you need more convincing about your original question, DOM traversal operations tend to be more expensive (computationally) than a simple getElementById().
Hope this helps.

If your links and tab panes are in the same order a simple approach is to find the pane whose index matches that of the activated link, with respect to the elements' parent nodes. This can be accomplished easily with a bit of jQuery:
<div id='nav'>
<a href='#'>Tab 1</a>
<a href='#'>Tab 2</a>
<a href='#'>Tab 3</a>
</div>
...
<div id='tabs'>
<div>Contents of tab 1</div>
<div>Contents of tab 2</div>
<div>Contents of tab 3</div>
</div>
...
<script type='text/javascript'>
$(function() {
var $nav = $('#nav a'), $tabs = $('#tabs > div');
$tabs.gt(0).hide();
$nav.click(function() {
$tabs.hide().eq($nav.index(this)).show();
return false;
});
});
</script>

I like to use in-line anchor tags for this, it has the added benefit of working pretty well if JavaScript and CSS are turned off.
Foo
Bar
Baz
<style type="text/css">
#hiddenDivs div {
display: none;
}
</style>
<div id="hiddenDivs">
<div>
<a name="div-123"></a>
Some stuff in here for Foo
</div>
<div>
<a name="div-124"></a>
Some stuff in here for Bar
</div>
<div>
<a name="div-125"></a>
Some stuff in here for Baz
</div>
</div>
<script type="text/javascript">
jQuery("a[href~='#div-']").click(function(){
// extract the name of the anchor
var id = $(this).attr('href').split('#')[1];
jQuery('#hiddenDivs div').hide();
jQuery('div:has(a[name='+id+'])').show();
return false;
})
</script>