replacing div content with a click using jquery

Question

I see this question asked a lot in the related questions, but my need seems very simple compared to those examples, and sadly I'm just still too new at js to know what to remove...so at the risk of being THAT GUY, I'm going to ask my question...

I'm trying to switch out the div contents in a box depending on the button pushed. Right now I have it working using the animatedcollapse.toggle function, but it doesn't look very good. I want to replace it with a basic fade in on click and fade in new content on next button.

Basic idea:

<div>
<ul>
<li><a href="this will fade in the first_div"></li>
<li><a href="this will fade in the second_div"></li>
<li><a href="this will fade in the third_div"></li>
</ul>
<div class="first_container">
 <ul>
  <li>stuff</li>
  <li>stuff</li>
  <li>stuff</li>
 </ul>
</div>
<div class="second_container">
 <ul>
  <li>stuff</li>
  <li>stuff</li>
  <li>stuff</li>
 </ul>
</div>
<div class="third_container">
 <ul>
  <li>stuff</li>
  <li>stuff</li>
  <li>stuff</li>
 </ul>
</div>
</div>

I've got everything working with the animated collapse, but it's just an ugly effect for this situation, so I want to change it out.

Thanks! Joel

Answer 1

Looks like toggle supports a speed setting...maybe that would be more elegant?

Answer 2

How about a JQuery fade out - http://docs.jquery.com/Effects/fadeOut and then your callback is a fade in?

..I just saw your link in the comments, that is exactly what they are doing on CSS tricks. Do you have a more specific question?

UPDATE The visible class refers to the div that will be visible...haven't tested this but it should be about right

$('.first_container').click(function(){
    $('.visible').fadeOut(3000,function(){
                this.removeClass('visible');
        $('.first_container').addClass('visible');
        $('.first_container').fadeIn(3000);
    });
})

That is the code to reference your first_container....you can go from there

Answer 3

Joel, I think I understood what you wanted. Does this look right? In the code below I also used a convention where you append js to the class attribute on HTML so you can style your JS bits differently. If JS were disabled, all three tabs would show down in order. However, as long as JS is enabled, your code will display as desired.

You could improve this by dynamically setting the height of the #animators div based on the tallest height of the children, but it was getting complex enough as it was!

I changed your HTML a bit (both for testing and functionality.):

<div>
  <ul>
  <li><a href="#">First</a></li>
  <li><a href="#">Second</a></li>
  <li><a href="#">Third</a></li>
  </ul>
  <div id="animators">
    <div class="container">
     <ul>
      <li>stuff1</li>
      <li>stuff1</li>
      <li>stuff1</li>
     </ul>
    </div>
    <div class="container">
     <ul>
      <li>stuff2</li>
      <li>stuff2</li>
      <li>stuff2</li>
     </ul>
    </div>
    <div class="container">
     <ul>
      <li>stuff3</li>
      <li>stuff3</li>
      <li>stuff3</li>
     </ul>
    </div>
  </div>
</div>

Add this to your CSS:

.js #animators { position: relative; height: 100px}
.js #animators div.container { position: absolute; left: 0; top: 0 }

And use this JavaScript:

<script type="text/javascript">
  document.documentElement.className += " js"; // Add js class to the HTML element
  $(function(){
    var $containers = $("#animators > div").hide();

    $('ul li a').each(function(i,el){
      var idx = i;
      $(this).click(function(e){
        var $target = $containers.filter(':eq(' + idx + ')');
        // Fade out visible div
        if($containers.filter(':visible').not($target).length){
          $containers.filter(':visible').fadeOut();
        }
        // Fade in new div if not already showing
        $target.not(':visible').fadeIn();
        e.preventDefault();
      })
    })
  });
</script>

EDIT Here is an alternate JavaScript block that fadesOut then fadesIn:

<script type="text/javascript">
  document.documentElement.className += " js"; // Add js class to the HTML element
  $(function(){
    var $containers = $("#animators > div").hide();

    $('ul li a').each(function(i,el){
      var idx = i;
      $(this).click(function(e){
        var $target = $containers.filter(':eq(' + idx + ')');
        // Fade out visible div
        if($containers.filter(':visible').not($target).length){
          $containers.filter(':visible').fadeOut(1000, function(){
            $target.not(':visible').fadeIn(1000);
          });
        } else {
          $target.not(':visible').fadeIn(1000);
        }

        e.preventDefault();
      })
    })
  });
</script>