Ok, what I gave you was a simple example. Lets analyse a little more and lets see what you want exactly.
1. you want a list of parent items with + signs before them. 2. when these parent items are clicked you want your content to slide fade down or slide fade up depending on their current state 3. you say you have a small script that does filtering. could you show me the HTML output of this script So i could help you integrate it easier. 4. theres many ways to skin a cat :) they may not all be pretty but they still work. I will. show you my way after you read through this list and responded. On Sun, Jan 3, 2010 at 5:37 AM, Once <busetolo...@gmail.com> wrote: > Waseem, thanks for your answers. I tried to implement what you > suggested but it seems the script only hides and show > the .extendedcontent container. Since the portfolio also has a small > script that filters the item depending on the category (web, print, > branding), all the items have to be in the same div, so putting some > in one div and the others in the hidden .extendencontent would break > the filtering... If you take a look, you can see what I mean > http://invitro.vegasoftweb.com/es/ under Proyectos Recientes. > > I believe there is a way to toggle the height and animate the effect > with a starting height, so it goes from that specific height to a full > height, thus showing the first three items to the total nine. I just > don't know how to write the code to do that since I couldn't find > where to put a starting height value for that... > > On 2 ene, 17:49, waseem sabjee <waseemsab...@gmail.com> wrote: > > 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! >
