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.

+3


source to share


3 answers


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

0


source


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();
});

      

0


source


Here's a jsfiddle that shows how to use show () and hide () to do what you ask:

http://jsfiddle.net/ZvB7X/1

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();
});​

      

0


source







All Articles