JQuery help - show hide div plus addClass on same onclick function

[francdore]

Hi there,

I really need some help in adding an onclick function on a link to show a div and add a class (active) on the current "a href" tag.

Currently I have this and it works:

<a onclick="$('facebook-submission').show(); return false;"></a>

This shows the div:

<div id="facebook-submission" class="facebook-submission" style="display: none;"></div>

But I also need to add an class on the a href link when it's clicked on. So I want to add something like this:

$(this).addClass('active');

But I want it all in the same onclick "line" like this:

<a onclick="$('facebook-submission').show();$(this).addClass('active'); return false;"></a>

How do I get this to work?

Thank you in advance!

 

[Dm7]

That's the wrong place to put the jQuery. Give the link an id and then use an event.

In the head section of your html page (or in a separate js file):

<script type="text/javascript">

	$(document).ready(function(){

		$('#your_link_ID').click(function() {		
		      $('facebook-submission').show();
		      $(this).addClass('active');
		});
	});

</script>

Your link:

<a id="your_link_ID" href="#">Click</a>

 

[Roo!]

Dm7 is absolutely correct, rather put the jquery controls in the $(document).ready(function(){});

If for some reason you can then try something like this:

<a onclick="function () {$('facebook-submission').show();$(this).addClass('active'); return false;}"></a>

 

[francdore]

OK awesome! Thanks.

What if I need to show and hide 4 different div's.

So I'll have:

<script type="text/javascript">

	$(document).ready(function(){

		$('#facebook-link').click(function() {		
		      $('facebook-submission').show();
		      $(this).addClass('active');
		});
	});

</script>

And then the links:

<a id="facebook-link" href="#"></a>
<a id="twitter-link" href="#"></a>
<a id="email-link" href="#"></a>
<a id="bookmark-link" href="#"></a>

And then 4 divs:

<div id="facebook-submission" style="display: none;"></div>
<div id="twitter-submission" style="display: none;"></div>
<div id="email-submission" style="display: none;"></div>
<div id="bookmark-submission" style="display: none;"></div>

Thank you for your help!

 

[Dm7]

Edit: Sorry, I didn't read your post properly. You can create separate click events for each link.

 

[francdore]

Ok thanks.

But what does this change to because there would the 4 different links now? Sorry but I don't have a clue how JQuery works.

$('#facebook-link').click(function() {

Thanks

 

[francdore]

Hey,

This is probably wrong?

<script type="text/javascript">
	$(document).ready(function(){

		$('#facebook-link').click(function() {		
		      $('#facebook-submission').show();
		      $(this).addClass('active');
		});
		$('#twitter-link').click(function() {		
		      $('#twitter-submission').show();
		      $(this).addClass('active');
		});
		$('#email-link').click(function() {		
		      $('#email-submission').show();
		      $(this).addClass('active');
		});
		$('#bookmark-link').click(function() {		
		      $('#bookmark-submission').show();
		      $(this).addClass('active');
		});
	});
</script>

Each link has it's own id:

<a href="" id="facebook-link"></a>
<a href="" id="twitter-link"></a>
<a href="" id="email-link"></a>
<a href="" id="bookmark-link"></a>

<div id="facebook-submission" class="facebook-submission" style="display: none;"></div>
<div id="twitter-submission" class="twitter-submission" style="display: none;"></div>
<div id="email-submission" class="email-submission" style="display: none;"></div>
<div id="bookmark-submission" class="bookmark-submission" style="display: none;"></div>

Thank you in advance.

 

[russellO]

<script type="text/javascript">
function change(id) {
$('#' + id + '-submission').show();
$('#' + id + '-link').addClass('active');
}
</script>

<a href="javascript:change('facebook');" id="facebook-link"></a>
<a href="javascript:change('twitter');" id="twitter-link"></a>
<a href="javascript:change('email');" id="email-link"></a>
<a href="javascript:change('bookmark');" id="bookmark-link"></a>

Something like that is much easier. Sorry but not in the mood to try it out, have loads to finish off, so not sure if it works 100%.

Edit: I'm one of those guys that hates seeing code being copy and pasted. It should be re-used. So 1 function to me is 10 times better than 4 functions doing the same thing but just with 1 or 2 differences.

 

[francdore]

Thank you russelO,

I placed your code in my files and it didn't work.

When I open my browser console I get the following error:

22Uncaught TypeError: Cannot call method 'show' of null

Thanks

Something like that is much easier. Sorry but not in the mood to try it out, have loads to finish off, so not sure if it works 100%.

Edit: I'm one of those guys that hates seeing code being copy and pasted. It should be re-used. So 1 function to me is 10 times better than 4 functions doing the same thing but just with 1 or 2 differences.

 

[russellO]

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Hello World</title>
<script type="text/javascript" src="/scripts/jquery-1.3.2.min.js"></script>
<script type="text/javascript">
function change(id) {
$('#' + id + '-submission').show();
$('#' + id + '-link').addClass('active');
}
</script>
</head>

<body>
<a href="javascript:change('facebook');" id="facebook-link">facebook-link</a>
<a href="javascript:change('twitter');" id="twitter-link">twitter-link</a>
<a href="javascript:change('email');" id="email-link">email-link</a>
<a href="javascript:change('bookmark');" id="bookmark-link">bookmark-link</a>

<div id="facebook-submission" class="facebook-submission" style="display: none;">facebook-submission</div>
<div id="twitter-submission" class="twitter-submission" style="display: none;">twitter-submission</div>
<div id="email-submission" class="email-submission" style="display: none;">email-submission</div>
<div id="bookmark-submission" class="bookmark-submission" style="display: none;">bookmark-submission</div>

</body>
</html>

Just ran that and it worked. That error you got sounds like an element id or something is incorrect, the value you passing to the function correct?