heres our HTML & CSS we have 9 divs. the first three are shown and other 6 are hidden.
<style type="text/css"> * { margin:0; padding:0; } . block { float:left; width:32%; // 3 blocks per row. less 1% for IE height:200px; // height is good to have...but required for IE border:1px solid #000; // thin black border } .end { clear:left; // clear float height:0; // no weird space } . expand { width:100%; text-align:left; } </style> <div class="container"> <div class="rowwrap"> <div class="block"> Block Content Here </div> <div class="block"> Block Content Here </div> <div class="block"> Block Content Here </div> <br class="end" /> </div> <div class="expand"> <a href="#"> class="expander">+</a> </div> <div class="rowwrap"> <div class="block"> Block Content Here </div> <div class="block"> Block Content Here </div> <div class="block"> Block Content Here </div> <br class="end" /> </div> <div class="rowwrap"> <div class="block"> Block Content Here </div> <div class="block"> Block Content Here </div> <div class="block"> Block Content Here </div> <br class="end" /> </div> </div> heres our script <script type="text/javascript"> var $w = jQuery.noConflict(); // prevent any possible conflicts $w(function() { var obj = $w(". container"); // obj reference point var rows = $w(". rowwrap", obj); // row reference point rows.slideUp(0); rows.eq(0).slideDown(0); var expander = $(".expander", obj); var switcher = 0; expander.click(function(e) { e.preventDefault(); if(switcher == 0) { rows.eq(1).slideDown(500); rows.eq(2).slideDown(500); expander.text("-"); switcher = 1; } else if(switcher == 1) { rows.eq(1).slideUp(500); rows.eq(2).slideUp(500); expander.text("+"); switcher = 0; } }); }); </script> On Sun, Jan 3, 2010 at 10:28 PM, John Sanabria <busetolo...@gmail.com>wrote: > Waseem, again thank you for your help. > > Now, this is what I'm trying to do. (I'm adding a couple of screenshots for > further detail) > > First image: > > As you can see, I have a unordered list with an id of "filter" that > *filters* the items of the also unordered list with an id of portafolio. The > filtering works by adding a class of "current" to the items that are visible > (and match the category you're clicking, eg web, print, etc) and a hidden > class (witha a display:none) to the ones that are hidden. > > The div with an class of portfolioclip is the container of the portfolio > items and it initially displays ONLY the first three items, regardless if > the number of items made visible by the filtering script is higher. The > .portfolioclip has a height of 225px and overflow:hidden. > > So when one clicks in the plus button (#portfolio-morelink) I want the > container's height to grow automatically to show all the visible items, as > you can see in the next image. I've sort of accomplished this toggling the > class of the container with jQuery to .portfoliofull (height:100%) and a > 2000 ms duration so it slides smoothly when it grows. > > > $s('.portfolioclip').toggleClass('portfoliofull', 2000); > return false; > }); > > The problem, as I stated in the first post, is that Internet Explorer > doesn't pick the duration value and it expands/contracts the div very > harshly, no smooth animation. > > I've read I can do this with toggling the initial height (232px) with the > final height (auto) but I don't understand how to state the initial height > is different than 0. So it goes from 232px to 0 which is not what I want. > > Also I tried with animating the height without the toggling and it works > fine except it only works once cause since there is no toggling, the div > doesn't return to its previous state. > > I hope I've explained myself. If not, please tell me what more info do you > need and I will answer. Again, thank you very much. > > PD: The link, once more, is http://invitro.vegasoftweb.com/es/ >