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 <busetolo...@gmail.com> 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! >