Question

So here is what I am trying to accomplish. First I will have about 8 or so images on the left side of the page and about 8 divs on the right side. Now when a person clicks on an image I want the current div to “hide” and be replaced with the other div that that image is linked to.

For example: I click on 2nd image and the right side changes…then I click the 4th image…the right side is replaced with the div linked to that image and the content that was linked to the 2nd image hides…etc

I have been trying to use the Jquery Toggle function but it seems to be giving me issues and I may not be using it correctly. Was wondering if this is even the way to go…is there a simpler way to go that will get me the same out come?

Here is my current url for testing this before I build the real thing:
http://dtrot55.justinsonline.com/testing/thinkfirst-test/Untitled-1.html

Answer 1

This will work if you set up like this … Also, this is the bare minimum styling … Just what you need to get the functionality to work.

HTML

<div id="mainContent">
   <div id="thumbs">
       <a href="#content1">Content1</a>
       <a href="#content2">Content2</a>
       <a href="#content3">Content3</a>
   </div>

   <div id="contentWrap">
      <div id="content1">
          <p>Content 1</p>
      </div>
      <div id="content2">
          <p>Content 2. Content 2. Content 2</p>
      </div>
      <div id="content3">
          <p>Content 3 information goes here. Content 3 information goes here. Content 3 information goes here</p>
      </div>
  </div>

</div>

CSS

#contentWrap { position: relative; }

#contentWrap div { position: absolute; left:0; top:0; }

jQuery

$(function() {
    $('#contentWrap div').hide();
    $('#contentWrap div:first').show();
    $('#thumbs a:first').addClass('active');

    $('#thumbs a').click(function() {
        if ($(this).hasClass('active') == true) {
            return false;
        }
        else {
            $('a.active').removeClass('active');
            $(this).addClass('active');

            $('#contentWrap div').fadeOut();
            var contentToLoad = $(this).attr('href');
            $(contentToLoad).fadeIn();

            return false;
        }
    });
});

Edit Explanation:
Basically, when the page loads. Line 1 says to hide all content Divs. Line 2 says to show the first Content Div inside ContentWrap. Line 3 ads a class to the first Thumb anchor.

Now on to the click function. Lets pretend for a sec that the if statement is not there and the only code executed for the click function is what’s in the else block. First line removes the class ‘active’ from all Thumb anchors. Second line adds the class ‘active’ to the Thumb anchor you just clicked. Next line fades out all visiable Contents divs within ContentWrap div. The next line create a variable based on the href value of the link you just clicked (which is the ID of the content you want to load). With the ID as a variable, it’s now ready to be used as a selector. The next line uses the variable to select the Content div you want to load and fades it in. Last line prevents the link from executing.

Why is there an if, else statement. The first part of the if statment simply says, if the Thumb anchor you click on has a class of active, don’t load content. If it doesn’t, then load the content.