Can anyone see what's wrong with this Jquery code to show and hide divs?

F

francdore

Banned
Joined
Feb 16, 2011
Messages
285
Reaction score
0
Location
Johannesburg
Hey,

This is probably wrong?

Code: 
<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:

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

Code: 
<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.
 
Your a tag link is still going to fire so the page will reload even tho you have bound jQuery events. Add in a false return to your different events to prevent the link firing eg:

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

I would personally also create an array for the different a tags and loop that array to bind events. This allows for scalability and avoids code repetition.

I would also avoid the inline style on the DIVs. You already have an ID assigned to these elements so rather add the style to the CSS or even add a common class that applies the display none style.
 
Um what do your links look like? Does a link display if it has no text?
 
THANK YOU EVERYONE!

It works!

Only problem now is that it shows all divs when I click on the different links.

How can I show one div at a time?

Thank you in advance!

webhostingfordummies said:
Your a tag link is still going to fire so the page will reload even tho you have bound jQuery events. Add in a false return to your different events to prevent the link firing eg:

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

I would personally also create an array for the different a tags and loop that array to bind events. This allows for scalability and avoids code repetition.

I would also avoid the inline style on the DIVs. You already have an ID assigned to these elements so rather add the style to the CSS or even add a common class that applies the display none style.
Click to expand...
 
francdore said:
THANK YOU EVERYONE!

It works!

Only problem now is that it shows all divs when I click on the different links.

How can I show one div at a time?

Thank you in advance!
Click to expand...

Would this technique you are trying to achieve be called collapsing divs ? If so a quick Google search brings up about 752,000 links, maybe some of them could give you the solution you looking for ?

These might be a source of inspiration for you :-

http://plugins.jquery.com/plugin-tags/collapse
http://plugins.jquery.com/project/animatedcollapsiblediv
http://designgala.com/how-to-expand-collapse-toggle-div-layer-using-jquery/
 
Last edited:
I could write this solution for you but I would land up redoing almost all of it. I would rather put the list items into a html list tag <ul>, give the ul an id and use the jQuery each function to loop through the a, get each id and use that for binding events, and showing / hiding DIVs. Basically creating dynamic events based on the contents of a list items children.

Doing this would eliminate the need to do any jQuery if a new link was added in HTML, obviously on condition certain HTML "rules" were met.

Id also need to see the design to know what HTML to write for the 2 "lists"; being the buttons and DIVs. Example could the DIV be nested in the same <li> as the A?
 
Last edited:
This won't win any awards but it will display only one div at a time, remove the active class from any previously clicked links and uses only one function:

Code: 
<style type="text/css">

.submission{
display:none;
}

a.active{
color:red;
}

</style>

<script type="text/javascript">

	$(document).ready(function(){
		
		$('.link').click(function(){
						
			$('.submission').hide();		
			var div_to_show = '#' + $(this).attr('id') + '-submission';			
			$(div_to_show).show(); 
			$('.link').removeClass('active');  		  
			$(this).addClass('active');			
			return false;
		
		});
		
	});
	
</script>
	
<a href="" id="facebook" class="link">facebook link</a>
<a href="" id="twitter" class="link">twitter link</a>
<a href="" id="email" class="link">email link</a>
<a href="" id="bookmark" class="link">bookmark link</a>


<div id="facebook-submission" class="submission">facebook div</div>
<div id="twitter-submission" class="submission">twitter div</div>
<div id="email-submission" class="submission">email div</div>
<div id="bookmark-submission" class="submission">bookmark div</div>
 
Dm7 said:
This won't win any awards but it will display only one div at a time, remove the active class from any previously clicked links and uses only one function:
Click to expand...

Yeah, that'd be the approach I'd take. Perhaps more efficient though, would be to use the siblings selector, like so...

Code: 
<script type="text/javascript">

$(document).ready(function() { 

	$('.social_links a').click(function(){	
		$(this).addClass('active')
			.siblings('a').removeClass('active');	
		
		var id = $(this).attr('href');	
		$(id).show()
			.siblings('div').hide();
		
		return false;
	});

});

</script>
<div class="social_links">
    <a href="#facebook-submission" id="facebook-link">facebook</a>
    <a href="#twitter-submission" id="twitter-link">twitter</a>
    <a href="#email-submission" id="email-link">email</a>
    <a href="#bookmark-submission" id="bookmark-link">bookmark</a>
</div>

<div class="social_container">
    <div id="facebook-submission" class="facebook-submission" style="display: none;">[facebook]</div>
    <div id="twitter-submission" class="twitter-submission" style="display: none;">[twitter]</div>
    <div id="email-submission" class="email-submission" style="display: none;">[email]</div>
    <div id="bookmark-submission" class="bookmark-submission" style="display: none;">[bookmark]</div>
</div>
 
Yes, I like yours better, especially passing the id via the href :)
 
You must log in or register to reply here.
Back
Top
Sign up to the MyBroadband newsletter
X