lets say I have this HTML & CSS markup
. extendcontent {
display:none;
}
<div class="extender">
<a href="#" class="extend">+</a><a class="extend" href="#">Click to
extend</a>
<div>
// all your extend content goes here
<div class="extendcontent">
This is div #1 of extended content
</div>
<div>
This is div #2 of extended content
</div>
<div>
This is div #3 of extended content
</div>
</div>
</div>
now heres the script
var $s = jQuery.noConflict();
$s(function() {
var obj_extend = $s(". extender");
var btn_extend = $s(". extend", obj_extend);
btn_extend .click(function(e) {
e.preventDefault();
btn_extend.next().show();
});
});
On Sat, Jan 2, 2010 at 9:38 PM, Once <[email protected]> wrote:
> Hi. I'm new to jQuery and ran into this dilemma. In the portfolio
> section of my homepage ( http://invitro.vegasoftweb.com/es/ ). I have
> a div with 9 items but only 3 are showing, the other 6 are hidden by
> another div that has a fixed height and thus clip them. I am trying to
> implement a soft transition when a "+" button is clicked and the
> hidden 6 are visible.
>
> I tried this two ways:
>
> 1. Toggling classes between the clipdiv and the fulldiv and adding a
> duration value for toggleClass. However the transition doesn't work in
> IE
>
> var $s = jQuery.noConflict();
> $s(document).ready(function() {
> $s('a#portfolio-morelink').click(function() {
> $s('.portfolioclip').toggleClass('portfoliofull', 2000);
> return false;
> });
>
>
> 2. trying the "Animate - toggle height" but I can't get it to work
> with a starting height so it goes from showing the 3 items to not
> showing anything, instead of opening and revealing the hidden 6.
>
> var $s = jQuery.noConflict();
> $s(document).ready(function() {
> $s('a#portfolio-morelink').click(function() {
> $s('.portfolioclip').animate({height: auto});
> return false;
> });
>
> Also, tried the "Animate height" and it does work but it doesn't
> toggle, meaning you can only do it once and it won't return to
> smaller.
>
> var $s = jQuery.noConflict();
> $s(document).ready(function() {
> $s('a#portfolio-morelink').click(function() {
> $s('.portfolioclip').animate({height:"toggle"}, 5000);
> return false;
> });
>
> Any help would be highly appreciated. Thanks!
>
