We Keep Coding

jQuery program not working

I am having a problem using jQuery, merely due to inexperience using it. My program is meant to give the CSS class current to the links in my navbar if they are clicked, and remove the class from the previous owner of it.
Keep in mind I am very inexperienced in javascript, only picking it up in a few minutes for the sake of a school assignment.The script is simply not doing anything.
My Code:
$(document).ready(function() {
$('a').click( function(i){
var $current = $('a.current');
$(this).addClass('current');
$current.removeClass('current');
});
});
Edit 1: Strange bug, current class is applied to the whole document if I do not click a link, but instead click the document.

You should first remove the class, and then add it. Otherwise you will not have a class added if you click an anchor twice.
$(function() {
$('a').click(function() {
$('a.current').removeClass('current');
$(this).addClass('current');
});
});

Try this:
$current.removeClass('current');
$(this).addClass('current');
You need to first remove the active class, then add the current class for the current element.

You need to narrow down your code to only affect the links in the nav bar, as currently, you are targetting all <a> tags.
var navLink = $('.nav a');
navLink.on('click', function(e){
navLink.removeClass('current');
$(this).addClass('current');
});
In this code, the variable gets all instances of the nav links, and if one of them is clicked, will remove the current class from all of the links before adding it onto the one that was clicked.
This jsfiddle will show you it in action: https://jsfiddle.net/td48vcqy/

How can I make entire DIV clickable AND open child links in separate DIV?

I asked a precursor to this question here:
Click link in DIV and show PHP/HTML in separate DIV
Then, after I removed the first script shown below, I was able to get the second script to work. I revised my question, but it appears to have gone silent. So I have a slightly modified question.
What is the conflict between the 2 scripts below and how can I modify them to work in tandem? Basically I want to be able to click anywhere in the DIV (".side_items") and have the child anchor links open in a separate DIV ("#main_content")
Javascript:
<script type="text/javascript">
$(document).ready(function(){
$(".side_items").click(function(){
window.location=$(this).find("a").attr("href");
return false;
})
});
</script>
<script type="text/javascript">
$(document).ready(function(){
$(".side_items a").click(function(e){
e.preventDefault();
$("#main_content").load($(this).attr("href"));
});
});
</script>
HTML: (slightly simplified)
<div id="main_content">
</div>
<div id="right_side">
<div class="side_items">
<a href="content.html">
<img src="images/examplethumb.png" /><br />
Content</a>
</div>
</div>
Both scripts work independently to achieve their individual desired result.

This will do it:
$(document).ready(function(){
$(".side_items").click(function(){
$("#main_content").load($(this).find("a").attr("href"));
return false;
})
});
Breaking it down:
$(".side_items").click(fn);
Find all the elements with a class of side_items and assign a click event handler (fn) to them. Each time one of these elements is clicked, fn is executed with the context of the element. In the discarded code you were using the selector .side_items a, which meant the click handler was only bound to the links inside the div, not the div itself.
$(this).find("a").attr("href")
Find all the links that are contained within the current element (this), and get the value of the href attribute from the first element found. In the discarded code the context (this) was a link. Since our handler is now bound to the containing div, the context is also the div. To get the link you have to find it.
$("#main_content").load(href);
Find the element with an id of main_content and load the content found at href into it. In the discarded code you were setting location.href, which causes the page to navigate away.

I think your issue is that you're trying to assign the $().ready(..) handler twice.
Try combing scripts like this
<script type="text/javascript">
var change_location = function(){
$(".side_items").click(function(){
window.location=$(this).find("a").attr("href");
return false;
});
}
var load_location = function(){
$(".side_items a").click(function(e){
e.preventDefault();
$("#main_content").load($(this).attr("href"));
});
}
$().ready(function(){
change_location();
load_function();
});
</script>
Hope that helps

Hide all links except for one in javascript?

What is the best way to hide all links except for one in javascript? (jquery is okay)
Say I have the following:
<div id="choices">
<div><a href="#">A<></div>
<div>B</div>
<div>C</div>
</div>
I want to make it such that if a user clicks link A, B, or C, the div's that do not contain the one that was selected disappear and the choice selected pops up in an alert box. Upon clicking on a reset button, all the divs appear again as normal.
Example: User clicks A, results in B and C divs hiding. User kicks Reset button and all show up again.
How do I accomplish this?
NOTE: I have been assigning IDs to each of the A, B, C divs respectively and made a function where when the user clicks B, it calls a $(divnotclicked).hide() for the ones I want to hide. And for the reset button I just do .show() for each of them $(A).show(), $(b) $.show()(C).show().... but theres gotta be a way to do with without me assigning IDs to each of them. Im looking for the best way to do it.
Im looking for the best way to do this, preferably without manually calling functions for each of them or assigning IDs to each div within the "choices" div. Or having to call on each individual div to ".show" upon clicking the Reset button.

With jQuery, it's quite simple:
$('#choices div').click(function() { $(this).siblings().hide(); });
$('#resetButton').click(function() { $('#choices div').show(); });
Also, here is a jsFiddle with this code in action. In general, jsFiddle is an excelent tool when you need to play with jQuery (or other frameworks, for that matter).

Just get all links and remove the one that was clicked using the not method:
$('#choices a').click(function(e){
e.preventDefault(); // stop the click from activating the link
$('#choises a').not(this).parents().hide();
// do something with the chosen link
});
$('#reset').click(function(){
$('#choices a').parents().show();
});

give each link its individual id. and add the same class to all of them For example:
<a class="mylinks" id="link01" href="someURL">friendly text</a>
then, when someone clicks on one of your buttons, set the css-visibility of the class to hidden, and then set the visibility of the id that belongs to the button to visible again.

Here's how I would do it:
$('#choices a').click(function() {
$(this).parent().siblings().hide();
});
And for the reset:
$('#resetButton').click(function() {
$('#choices div').show();
});
Here's a working example: http://jsfiddle.net/W9Sym/

with:
<div id="choices">
<div>A</div>
<div>B</div>
<div>C</div>
</div>
<button>Reset</button>
to hide the containing divs of those not selected and have the reset show them, here's a demo
$(function() {
$('#choices').on('click', 'a', function() { //bind click handler to choices, for links
$(this).parent().siblings().hide(); //find the others and hide them
});
$('button').on('click', function() { //bind click to button
$('#choices > *').show(); //show all children of choices
});
});​

You can try doing this:
HTML
<div id='A'>Hi, I'm A</div>
<div id='B'>Hello</div>
<div id='C'>Aaargh!</div>
<a href='#A'>A</a>
<a href='#B'>B</a>
<a href='#C'>C</a>
<button type='reset'>Reset</button>
jQuery
$('a').click( function() {
var show = $(this).attr('href');
$('div').each( function(e) {
$(this).not(show).hide();
});
e.preventDefault();
});
$('button').click( function() {
$('div').show();
});
Kind of verbose, but it should get the job done.

How to show a specific div with its own id in jQuery when I click a link?

I have a div like this:
<article id="#pippo">blablabla</article>
that I have hided with jQuery
$('article').hide();
now I'd like to have a link menu that show a specific article id when it's clicked for example.
If I click on link:
LINK PIPPO
I'd like that the article named #pippo is shown
if I click on link that point to #pluto, an article with id #pluto have to be shown...
how can I do this in jQuery?

If you want this to work for every <a> tag on your page then you can do the following
$('a').click(function (e) {
var id = $(this).attr('href');
$(id).show();
// Don't follow the link
e.preventDefault();
});
More likely though you want this to work on a subset of <a> on the page. If so you can distinguish them by putting a class in the link and changing your selector as appropriate
HTML:
LINK PIPPO
JavaScript:
$('a.fakeLink').click(function (e) {
var id = $(this).attr('href');
$(id).show();
// Don't follow the link
e.preventDefault();
});

Try this
$("a").click(function(){
$(this.href).show();
return false;
});

First add a class to identify the anchor tags that need this functionality, eg. 'visibility_toggle'. Then add a handler that uses the href attribute to work out which div to show/hide.
$('a.visibility_toggle').click(function(e) {
$(this.href).toggle();
e.preventDefault();
});

JQuery advice needed

I have a page and I want to show some paragraphs after clicking a link, before that it should be hidden. So i wrote a simple JQuery code, but the problem is when I click the open link all the other hidden divs are also shown. My code is given below please advice how to solve the issue.
HTML
<div>
Read More
<div class="expand_div">
<img src="images/close_button.gif" width="50" height="12" alt="Close" border="0" />
<p>My hidden content goes here..</p>
</div>
</div>
and I want to repeat the above <div> block 7 times. So when I click the first div's Read more button the remaining 6 hidden divs are also showing!!!
JQuery
<script language="JavaScript">
$(document).ready(function(){
$('a.open_div').click(function(){
$('.expand_div').show();
});
$('a.close_div').click(function(){
$('.expand_div').hide();
});
});
</script>
how to solve this issue..?
any answers would be appreciated!
Thanks
Paul

try this instead of your JQuery code:
<script language="JavaScript">
$(document).ready(function(){
$('a.open_div').click(function(){
$(this).parent().find('.expand_div').show();
});
$('a.close_div').click(function(){
$(this).parent().hide();
});
});
</script>
The problem with your code is that it's selecting ALL divs inside your page. and this is not what you want.
to solve this issue, this code is only limiting the scope of the action to the current link container, so the other divs will remain as is without any change.

Well, the selectors will select all elements with that class. If you keep your structure like this, you can do the following:
$(document).ready(function(){
$('a.open_div').click(function(){
$(this).next().show();
});
$('a.close_div').click(function(){
$(this).closest('.expand_div').hide();
});
});
As the div is the next sibling of the open link, next() will select the div and show it. The close link on the other side is a descendant of the div. closest() will find the closest ancestor that matches the selector.
Of course there are also other ways to select the elements.
See a working DEMO.

In your open event you need to open the "next" element in the DOM:
$('a.open_div').click(function() {
$(this).next().show();
});
In your close event you need to close the enclosing (parent) element:
$('a.close_div').click(function() {
$(this).parent().hide();
});
see http://jsfiddle.net/raybellis/vZbp3/

You are getting all "expand_div" elements and showing them. You need to only select the appropriate elements as related to this element.
<script language="JavaScript">
$(document).ready(function(){
$('a.open_div').click(function(){
$(this).siblings('.expand_div').show();
});
$('a.close_div').click(function(){
$(this).parent().siblings('.expand_div').hide();
});
});
</script>