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

Right now, I'm not using jquerry for the toggle effect, I'm using this: dynamicdrive.com/dynamicindex17/animatedcollapse.htm but I'd like to replace it with jquery. — Joel
– Joel, Commented Jan 15, 2010 at 6:28

Doug Neiner · Accepted Answer · 2010-01-15 07:41:43Z

4

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>

edited Jan 15, 2010 at 7:41

answered Jan 15, 2010 at 6:41

Doug Neiner

66.4k14 gold badges111 silver badges118 bronze badges

Sign up to request clarification or add additional context in comments.

14 Comments

Tony Over a year ago

the fadeIn should really should be in a callback.

Doug Neiner Over a year ago

@Tony if you want it to fadeOut then fadeIn, you are correct. I was going for a crossfade.

Tony Over a year ago

@Doug good point, i wrongly assumed he wanted fade out then fade in. nice solution

Joel Over a year ago

Thanks for doing this work. The sandbox model is doing exactly what I want. For some reason, when I plug this in my code, and I push the first button, it opens the contents of ALL the divs and no other buttons do anything. well I think I know what I did wrong, but my server just went down...:-(

Joel Over a year ago

Works great! Thanks man! now...how do I adjust the fade speed? :-D

|

tfwright · Accepted Answer · 2010-01-15 06:23:44Z

0

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

answered Jan 15, 2010 at 6:23

tfwright

3,03325 silver badges38 bronze badges

1 Comment

Joel Over a year ago

The toggle effect is too busy for my needs. I would like to replicate this: css-tricks.com/learning-jquery-fading-menu-replacing-content but I'm too new at this to know how to modify and remove all the extra bits...

Tony · Accepted Answer · 2010-01-15 07:02:28Z

0

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

edited Jan 15, 2010 at 7:02

answered Jan 15, 2010 at 6:39

Tony

19.2k32 gold badges135 silver badges196 bronze badges

1 Comment

Joel Over a year ago

it looks great...could you give me a code example if you have time? I've seen those pages, but I just don't know how to make that work for my code above...

krishna · Accepted Answer · 2013-03-14 05:30:54Z

0

If i've understood your question properly, this may be helpful for you

<div id="LoadMe2"><h3>Please select what to edit!</h3></div>
<script>
$('a').click(function() {
  $('#LoadMe2').load($(this).attr('href'));

  return false;
});
</script>

and html can be like

<a href="abc.php" style="text-decoration:none"><input type="button" value="edit Header menu"></a>

EDIT

sorry this helps you to fetch the content from those pages and displays it. keeping this post as someone else may need this

answered Mar 14, 2013 at 5:30

krishna

9602 gold badges16 silver badges35 bronze badges

Collectives™ on Stack Overflow

replacing div content with a click using jquery

4 Answers 4

14 Comments

1 Comment

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

14 Comments

1 Comment

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related