Hi All,

I am using the fadeIn / fadeOut Javascript function to hide content on a page. When the user clicks the button, one DIV e.g. #layerone will fade out and another DIV e.g. #layertwo will fade in.

However, I want to give users the ability to boomark/share the URL and see the content that they are currently seeing rather than having to reload the page from scratch and click through a number of DIVs to find it.

Of course, I also want to be able to direct people to specific 'sections' within this page. How can I achieve this?

Thanks a lot.

Here is the code I am using:

Code:
<script type="text/javascript">  
  
    $('#triggerButton').click(function(e){
        e.preventDefault();
        $('#layerone').fadeOut('fast', function(){
            $('#layertwo').fadeIn('fast');
        });
    });
    
    $('#triggerButton2').click(function(e){
        e.preventDefault();
        $('#layertwo').fadeOut('fast', function(){
            $('#layerone').fadeIn('fast');
        });
    });
    
    $('#triggerButton3').click(function(e){
        e.preventDefault();
        $('#layertwo').fadeOut('fast', function(){
            $('#layerthree').fadeIn('fast');
        });
    });
    
    $('#triggerButton4').click(function(e){
        e.preventDefault();
        $('#layerthree').fadeOut('fast', function(){
            $('#layertwo').fadeIn('fast');
        });
    });
    

</script>