Question

I am just delving into using jQuery and I want to start off by using good coding logic. I am developing an upload site where users can select “upload from computer” or “upload from url”. I have two links above the content where users can choose to upload from their computer or from a url, and I want the content to change with jQuery (with some effects) when the user makes their choice.

Demo of what I want:
http://imgkk.com/

In the content box where it says Upload: Images URL NFO, I want my content to slide like that.

I know how to accomplish this, but I’m not sure if its the correct way. I was going to check which content is visible when the user clicks the link and act accordingly, is this the best way?

Thanks.

EDIT: In response to someones answer:

            $(".upload-options a").click(function(e){
                var id = $(this).attr('href'),
                    $target = $(id);
                    alert($target);
            if(!$target.is(':visible')){
                // Show $target here since it is not currently visible 
                alert('Show: ' + $target);
            }
            });

Markup:

            <p class="upload-options">
                <a href="#normal-upload" class="normal">Normal upload</a>
                <a href="#url-upload" class="url">URL upload</a>
            </p>
            <div id="normal-upload">
                // normal upload stuff
            </div>
            <div id="url-upload">
                // url upload stuff
            </div>

Cheers!

Answer 1

I normally follow a pattern like this:

<div id="links">
  <a href="#computer">Computer</a>
  <a href="#url">URL</a>
</div>
<div id="panes">
  <div id="computer">

  </div>
  <div id="url">

  </div>
</div>

And then the jQuery:

$(function(){
    $("#links a").click(function(e){
      var id = $(this).attr('href'),
          $target = $(id);

      if(!$target.is(':visible')){
        // Show $target here since it is not currently visible 
      }
      e.preventDefault();
    })
});