We Keep Coding

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

Replacing div with another on click

My knowledge of javascript is close to none and I'm trying to have a div be replaced on click by another div.
<div class='replace-on-click'>
<h1>Click to Insert Coin</h1>
<div class='replaced-with'>
<div class='info-text'>
<h1>Title</h1>
<h2>Subtitles</h2>
</div>
<ul class='info-buttons'>
<li><a href='#' class='b1'>Buy Tickets</a></li>
<li><a href='#' class='b2'>Find Hotels</a></li>
</ul>
</div>
</div>
I'd like it so when you click "Click to Insert Coin", that will disappear and make the .replaced-with div take its place, hopefully with some kind of fade transition if possible. How do I go about doing this?

We will make use of jQuery because it helps us to get you desired behavior done in a few statements. So first include jQuery from somewhere in your head part of your HTML document.
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
Then somewhere include this Javascript code (e.g. create index.js and include it the way like the library code).
$(document).ready(function() {
$('h1').click(function() {
$(this).fadeOut(function() {
$('.replaced-with').fadeIn();
});
});
});
It does the following: When your document is ready, it adds an event handler on h1 waiting for clicks. On click, it first fades out the h1 and when it's done, it fades the other element in.
In your HTML document, include the hidden attribute to the object that should be hidden initially.
<div class='replaced-with' hidden>
Here you can find it working as well: http://jsbin.com/cuqoquyeli/edit?html,js,console,output

HTML + jquery - menu to change contents in the content DIV

I've been digging around on how to do it, but didn't find any solution which would fulfill my needs.
Got a basic layout of my page with menu on the left, separate div for header and a div in the middle where all the content should be displayed when one of the menu buttons is selected.
I'd like to change the content only of the "content" div dynamically without reloading the page when one of the menu buttons is pressed.
I've managed to do it as per below with jquery:
<script type="text/javascript" charset="utf-8">
$(document).ready(function(){
$('#nav ul li a').click(function(){
$('#main').load('contents.html #' + $(this).attr('href'));
return false;
});
});
The menu :
<nav id="nav">
<ul class="menu">
<li class="menu1"></li>
<li class="menu2"></li>
<li class="menu3"></li>
<li class="menu4"></li>
<li class="menu5"></li>
</ul>
</div>
</nav>
contents.html file sample:
<div id="menu1">
<h2>Menu1</h2>
<p>Menu1 page contents</p>
</div>
So when menu1 button is pressed I'm able to change the content of main div to reflect the relevant data - this works.
My questions are:
1) is this the correct way on how to do it ? If not what would you recommend ?
2)I want to display more advanced stuff not only text (e.g What if I want to have another jquery in the div-id="menu1" ? I've tried it and it didn't work.)
P.S - I'm just a beginner so maybe I've missed something basic - but couldn't fix it by myself.
Thanks in advance!
Peter

I think there are a number of ways to achieve what you want. It depends on the nature of the content you want to load.
If there isn't masses of it, you could load it all onto the page on page load within different div's and then just show and hide the relevant div when clicking the menu items. (have a look at twitter bootstrap for some implementations, things like tabbed browsing).
If you do just have text, you could use ajax to load in the data from an external file w3schools.com.
Alternatively as mentioned in a comment above, you could create a single page application using something like angular.js, knockout.js etc.
Hope that helps.

Toggle comes on but not off

I recently tried to do toggle on and off for a div, however using many methods, I was not able to do it due to the the link going to .com/#
until I found a post which make it happen without the redirect to #
<script type="text/javascript">
function toggleVisibility(newSection) {
$("#info").not("#" + newSection).hide();
$("#" + newSection).show();
}
</script>
I am still learning JavaScript and I do not know how to add in toggle off.
now it just toggles on and when i press it it does not toggle off.
Please help.

Toggle does both show and hide, based on the element's current display visibility. So something like this should work:
function toggleVisibility(newSection) {
$("#" + newSection).toggle();
}

What the code you have given does is hide all elements with an ID of info that do not have the ID given in newSection, then shows the newSection one.
Since elements can only have one ID, it's kind of weird and pointless to treat the elements as if they might have more than one, or if there might be more than one of the same.
You could just use the .toggle() method: $("#"+newSection).toggle()

sounds like you may want tabs: when one panel is selected the other panels disappear.
here's one common way to do it:
$('a.tab').click(function(e) {
e.preventDefault();
$('.panel:visible').hide();
var el = $($(this).attr('href'));
el.toggle();
});
you have links that show a particular panel in a group and hide the others:
<style type="text/css">
.panel {display: none;}
</style>
<a class="tab" href="#panel1">Show/hide panel 1</a>
<a class="tab" href="#panel2">Show/hide panel 2</a>
<a class="tab" href="#panel3">Show/hide panel 3</a>
<div class="panel" id="panel1">1</div>
<div class="panel" id="panel2">2</div>
<div class="panel" id="panel3">3</div>

How to open a new jsp page with JavaScript

I have the following dropdown menu how can i redirect each menu to corresponding page by clicking each of menu? is it possible by using one javascript function if yes how?
thanks in advance...
<div>
<ul>
<li id=home onclick="show(this.id)">Home</li>
<li id=collection onclick="show(this.id)>Collection</li>
<ul>
<li id=men onclick="show(this.id)>Men</li>
<li id=women onclick="show(this.id)>Women</li>
</ul>
<li id=contact onclick="show(this.id)>Contact</li>
</ul>
</div>

Yes you can.
Use window.open("URL") in your case URL is this.id
Also you can update window.location
read more here http://www.tizag.com/javascriptT/javascriptredirect.php
Like Niko said you need closing quotes
.. onclick="window.open(this.id)" ..

If you only need o JS function to redirect based on a parameter that, in your case, is the component ID, this will do the work:
<script type="text/javascript">
var show = function(id) {
window.location.href = id + '.jsp';
};
</script>
If you want to navigate DOM and get link's href attribute use:
document.getElementById(id).firstChild.href
Considering that the first element inside the component referred by ID is a link tag.

Try this?
$("div > ul li a").click(function() {
window.location.href += "/" + $(this).parent()[0].id;
});
I tried to use a selector that didn't modify your HTML, so that's why it looks so icky.

This makes no sense.
I understand that your particular functional requirement is to invoke the link when the enduser clicks somewhere in the space of the <li> outside the link. To achieve that just set the CSS display property of the <a> element to block. This way the link will span the entire space of its parent element.
<ul id="menu">
<li>Home</li>
<li>Collection</li>
<ul>
<li>Men</li>
<li>Women</li>
</ul>
<li>Contact</li>
</ul>
with this CSS
#menu li a {
display: block;
}
No need for ugly JavaScript hacks. Opening a new JSP page location in the current window is by the way to performed by window.location = 'some.jsp';. But this is not necessary if you use the right solution for the concrete problem. In the future questions, try to elaborate more about the functional requirement instead of concentrating only on the solution of which you thought that it's the right solution for the particular functional requirement.