Show / Hide Divs W / Pure JQuery Via Links
I'm looking for a way to show and hide a div using only JQuery via links. I wrote out an example below.
<div id="section1">
<a href="http://www.google.com" target="_blank">Google</a>
</div>
<div id="section2">
<a href="http://www.yahoo.com" target="_blank">Yahoo</a>
<div>
In this situation, let's say section 2 is hidden on page load. How can I show section 2 and hide section 1 when a Google link is clicked, and then redisplay section 1 and hide section 2 when a Yahoo link is clicked?
I have already dealt with this, but it includes a ton of complex scripting (javascript) and does not work in Internet Explorer which is the main problem.
Thanks for the help! I am very grateful for that.
source to share
You will need something similar to jQuery :
$(document).ready(function() {
$('#section1').show();
$('#section2').hide();
$('#section1 a').click(function() {
$('#section1').hide('fast');
$('#section2').show('fast');
return false;
});
$('#section2 a').click(function() {
$('#section2').hide('fast');
$('#section1').show('fast');
return false;
});
});
I have not tested it, it may need to be revised and possibly shortened. More details here: http://www.learningjquery.com/2006/09/slicker-show-and-hide
source to share
Use and , available in the jQuery library, will do your job ... .hide()
.show()
or use that easily cope with the task. .toggle()
$('#section1 a').click(function(){
$('#section1').hide();
$('#section2').show();
});
$('#section2 a').click(function(){
$('#section2').hide();
$('#section1').show();
});
source to share
Here's a jsfiddle that shows how to use show () and hide () to do what you ask:
and the relevant jQuery here (you will need to browse the jsfiddle to see it, followed by css and markup not to be repeated here.)
$('#section1 a').click(function(){
$('#section1').hide();
$('#section2').show();
});
$('#section2 a').click(function(){
$('#section2').hide();
$('#section1').show();
});
source to share