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

How to toggle specific divs with jquery

Okay so I have a very limited amount of knowledge with this and I can not find my answer anywhere. What I am trying to do is create multiple buttons that toggle information. So when the first toggle is clicked div 1 is toggled, when i click the second toggle div two opens and preferably div 1 closes. My code is very basic I am very new to this. Right now no matter what values I input into the toggle area both divs close. Thank you and I hope this makes sense.
Here is my code:
<script>
$(document).ready(function(){
$("button").click(function(){
$("div.house").toggle();
});
});
</script>
<button>Toggle</button>
<div class="house">
<p>SAMPLE TEXT ETC...</p>
</div>
<button>Toggle</button>
<div class="tumble-by">
<p>SAMPLE TEXT ETC...</p>
</div>

You can select the next sibling:
$("button").click(function(){
$(this).next().toggle();
});
In the above code, JavaScript this keyword refers to the clicked element. $(this) creates a jQuery collection and .next() method selects the very next sibling of the collection's element.

I agree too, that first you need to hide all divs:
$("button").click(function () {
$('div').hide();
$(this).next().toggle();
});

<script>
$(document).ready(function () {
$(document).on("click", ".js-toggle__button", function (e) {
$(".js-toggle__text").hide();
$(this).next(".js-toggle__text").show();
});
});
</script>
<button class="toggle__button js-toggle__button">Toggle</button>
<div class="toggle__text js-toggle__text">
<p>SAMPLE TEXT 1 ETC...</p>
</div>
<button class="toggle__button js-toggle__button">Toggle</button>
<div class="toggle__text js-toggle__text">
<p>SAMPLE TEXT 2 ETC...</p>
</div>
It's better to use uniquely defined identifiers when you accessing elements from JS (and don't use them for CSS — use separate names).
Your HTML code some day can be changed dramatically and JS will work anyway because it depends on identifiers but not on structure or on tag names.

Show/Hide two Divs with Jquery

i have two div's:
<div class="component_wrapper">
</div>
<div class="component_wrapper">
</div>
Jquery code:
<script type="text/javascript">
$(document).ready(function(){
$(".component_wrapper").hide();
$(".component_expand").show();
$('.component_expand').click(function(){
$(".component_wrapper").slideToggle();
});
});
</script>
I try every time I click on "component expand" one DIV open. Now open two
I'd be happy with who they help me on

You need to make your selector specific, use next.
$(this).next().slideToggle();
Try:
$(document).ready(function(){
$(".component_wrapper").hide(); //You can do this using css rule itself
$(".component_expand").show().click(function(){
$(this).next().slideToggle();
});
});
Demo

Use an instance of this and .next
$('.component_expand').click(function(){
$(this).next(".component_wrapper").slideToggle();
});

How to use jQuery slideDown() to display _almost_ all contents?

I have a div within a div. On page load, they should both be hidden, then when I trigger the slideDown() function on the outer div, I want the inner div to remain hidden. How can I achieve this?
<script>
$(function(){
$('.body').hide();
$('.display').click(function(){
$(this).closest('.wrapper').find('.body').slideDown();
});
});
</script>
<div class="wrapper">
<a class="display" href="#">Display Outer</a>
<div class="body">
Now displaying outer div
<div class="wrapper">
<a class="display" href="#">Display Inner</a>
<div class="body">
Now displaying inner div
</div>
</div>
</div>
</div>
Here is an example of it not working: http://jsfiddle.net/b7Tpt/

The reason it doesn't work is the use of find. find would traverse all levels to find the matches while the children would travel single level. So use find('.body:first') or children('.body')
$(function(){
$('.body').hide();
$('.display').click(function(){
$(this).closest('.wrapper').find('.body:first').slideDown();
});
});
Updated Example
OR
$(function(){
$('.body').hide();
$('.display').click(function(){
$(this).closest('.wrapper').children('.body').slideDown();
});
});
Updated Example

Try -
$('.display').click(function(){
$(this).siblings('.body').slideDown();
});
I think $(this).closest('.wrapper') was moving up the DOM tree and finding the top most wrapper div then opening all the body classes it found underneath. Using siblings should get the element with a body class that is directly beneath the clicked link.
Demo - http://jsfiddle.net/pMgVj/1/

try this: http://jsfiddle.net/Kf6gk/

onclick alert jquery html javascript

I have a page so far with:
<div id="x1">Text paragraph 1<link here></div>
<div id="x2">Text paragraph 2<link here></div>
<div id="x3">Text paragraph 3<link here></div>
Where link here is like
google
What I am trying to do is add a link to the bottom of each paragraph of text so that when it is clicked it displays an alert with the div id of that text block.
So for example, if someone clicks on the link at the bottom of text paragraph 2, then they will get an alert saying "x2".
So far, I have only been able to think of a way involving an onclick event for each link in each div. But with 100 paragraphs this could become quite a lot and is messy code.
like
$('#x1').onclick(function(){
alert('x1');
});
How can I do this better?
The page is generated with php so I could put the div id's anywhere in that text block area (even make a new div around the link if required)...
EDIT - Many good answers, I don't know which to pick as best. I actually ended up using Loongawas for my purpose as its easy to make for my beginner level in php.
<div id='a1'>This text <a href="" onclick=tomato(1)>test</a>
</div>
<div id='a2'>This text <a href="" onclick=tomato(2)>test</a>
</div>
<div id='a3'>This text <a href="" onclick=tomato(3)>test</a>
</div>
and
function tomato(test){
alert(test);
};
Some of the others are incredibly interesting as they use higher functions. I'm going to spend the rest of the day looking into them. Thanks to all.

use jQuery's live or delegate functions:
$('div a').live('click', function(ev){
alert($(this).closest('div').attr('id'));
});
The benefit to the live/delegate functions is that there's actually only a single event on the entire page for this (as opposed to one event per link). If you add more links dynamically, this still works without having to attach more events.
The difference between live and delegate is that delegate is specific to a part of the page. If, for instance, you wrapped all of these DIVs in another div, the call would look like:
$('#wrapperDiv').delegate('a', 'click', function(ev){ ...
The advantage to this is that the internal jQuery code that checks to see if the click matches the selector only runs on clicks inside of #wrapperDiv instead of clicks anywhere on the page.

You could make a javascript function that takes a variable and then pass the paragraph number to the function. If the paragraph was number two you could call
myfunction(2);
or is the number not the problem?

$('#x1, #x2, #x3').click(function(){
alert($(this).parents().attr("id"));
});
EDIT:
Better version:
HTML:
<div class="x">Text paragraph 1<link here></div>
<div class="x">Text paragraph 2<link here></div>
<div class="x">Text paragraph 3<link here></div>
$('.x a').click(function(){
alert($(this).parents().attr("id"));
});

Have you considered using a class to name them all as opposed to explicit ids?
<div class="x">Text paragraph 1<link here></div>
<div class="x">Text paragraph 2<link here></div>
<div class="x">Text paragraph 3<link here></div>
so then you would be able to use a single click event for all of them?
$(".x a").click()
{
//Use $(this) to refer to the clicked item.
alert($(this).parents().attr("id"));
});

$('.myDivs').click(function(){
alert($(this).parent().attr("id"));
});
Or select the divs in some other way:
$('#x1').parent().children('div').click(...);

Something along these lines should work:
<div id="x1">Text paragraph 1 <a href='google.com'>google.com</a></div>
<div id="x2">Text paragraph 2 <a href='google.com'>google.com</a></div>
<div id="x3">Text paragraph 3 <a href='google.com'>google.com</a></div>
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.5.0/jquery.min.js'></script>
<script>
$('a').click(function() {
alert($(this).parent().attr('id'))
return false
})
</script>

Add a class to each div, so you can select all of 'em at once.
<div id="x1" class="x">Text paragraph 1 <a>Click</a></div>
<div id="x2" class="x">Text paragraph 2 <a>Click</a></div>
<div id="x3" class="x">Text paragraph 3 <a>Click</a></div>
Then you can do:
$('div.x a').live('click', function(e){
e.preventDefault();
alert($(this).closest('div.x').attr('id'));
});
http://jsfiddle.net/VGh3X/1/

A better approach to this is to make all of the clickable areas share something in common that you can use as a selector. For example, if all of the clickable divs had class='click', you'd be able to select them all using $('.click') and bind to that.
$('.click a').bind('click', function() {
var div = this.closest('.click');
alert(div.attr('id'));
return false;
});

$(document).ready(function() {
var links = $("div[id^='x'] a"); //get the a tags
$.each(links, function(i,v) {
$(v).click(function() { //bind on click
alert(v.parentNode.id); //alert div id
return false; // stop
});
});
});