Best approach to slideup and tabs with jQuery

Question

I'm creating a page with an image at the top, and a menu below. When the user clicks on on of the 3 menu buttons, the image slideUp and the page scrolls down so the menu is at the top of the page, then the right .content div fades in. The slideUp should only happen the first time the user clicks on of the buttons.

What the absolute best way to do this with jQuery? (no plugins)

I also need to know how I can't prevent it to fade in the page that is already visible if i click the same button twice?

I'm using rel instead of href, since the href made the page jump, even with return false.

This is what I have so far:

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js"&gt;&lt;/script&gt;
<script type="text/javascript">
$(function(){

 imgVisible = true;

 $('#mainmenu a').click(function(){
  var $activeTab = $(this).attr('rel');
  if(!imgVisible){
   $('html:not(:animated),body:not(:animated)').animate({scrollTop:$('#mainmenu').offset().top-20},500);
   $('.content').hide();
   $($activeTab).fadeIn();
  } else{
   $('#imgholder').slideUp(500,function(){
    imgVisible = false;
    $('#mainmenu a[rel="'+$activeTab+'"]').click();
   });
  }
  return false;
 });

});
</script>

<div id="imgholder"><img src="image.jpg" /></div>

<div id="mainmenu">
 <ul>
  <li><a rel="#tab1"></a></li>
  <li><a rel="#tab2"></a></li>
  <li><a rel="#tab3"></a></li>
 </ul>
</div>

<div id="container">

 <div class="content" id="tab1">
  content
 </div>


 <div class="content" id="tab2">
  content
 </div>


 <div class="content" id="tab3">
  content 
 </div>

</div>

Answer 1

I think this is a great example of what your looking for: Organic Tabs

Answer 2

The following code accomplishes what you need:

$('#mainmenu a').click(function(){  
    var myrel=$(this).attr('rel');
    $('.content:not([id='+myrel+'])').hide();
    $('#imgholder').slideUp(500,function(){      
        $('#'+myrel).fadeIn();
    });         
});

....
    <li><a href='#' rel='tab0'></a></li>

I have removed the '#' sign from your rel='' piece ;-)

I am not sure why you would want to scroll the page. When a user clicks on the menu, he/she already has it focused (so it is visible inside the current viewport). But do you have a very large top image? If that is the case, let me know and I will modify the snippet. (Still, it depends on the amount of content below the menu visible when the page first loads.)

Also, for SEO reasons you might want to use the href instead of the rel attribute and create separate content holding pages. The following snippet would remove the navigation action.

$('#mainmenu a').each(function(){
    var myhref = $(this).attr('href');
    $(this).attr('href','#').attr('rel',myhref);
}).click(function(){
    var myrel=$(this).attr('rel');
    $('.content:not([id='+myrel+'])').hide();
    //....etc

Answer 3

var imgVisible = true;
var $activeTab, $lastTab;
var $mainmenu = $('#mainmenu');
var offset = $mainmenu.offset().top - 20;

$mainmenu.find('a').click(function() {

    $activeTab = $($(this).attr('rel'));

    if (!imgVisible) {
        // dont fire any events if already open
        if ($lastTab.attr('id') == $activeTab.attr('id')) return false;
        $lastTab.fadeOut('normal', function() {
            $activeTab.fadeIn(500, function() {
                $lastTab = $activeTab;
            });
        });
    } else {
        $('#imgholder').slideUp(500, function() {
            imgVisible = false;
            window.scrollTo(0, offset);
            $activeTab.fadeIn(500, function() {
                $lastTab = $activeTab;
            });
        });
    }

    return false;

});

I highly suggest adding <a href="#"> as this will not make the page jump when done properly and will ensure validation on your anchor links. Someone let me know if I missed something, it can be resolved quickly (or you can do it for me if you have an optimization or improvement).