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 <[email protected]>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/
>
