mkmanning,
I want to thank you for your contribution. I was able to understand
your example better (I just didn't get tres's version) and was able to
come up with the following js/code combo:
$(document).ready(function(){
$('ul').each(function(i) {
var ul = $(this), l = ul.children('li'), h = l.height();
ul.css({'height':(h*3)+'px','overflow':'hidden'});
$(this).siblings('.control').addClass('closed');
$(this).siblings('.control').html('<a
href="#">open</a>');
});
$('.control').click(function(){
var ul = $(this).parent().children("ul"), l =
ul.children('li'), h = l.height();
var me = $(this);
if( me.is('.closed') ) {
ul.parent().children("ul").animate({'height':(ul.height()>(h*5)?
(h*5):(l.length*h))+'px'});
me.removeClass('closed');
me.addClass('open');
$(this).html('<a href="#">close</a>');
} else {
//ul.css({'height':(h*3)+'px','overflow':'hidden'});
ul.animate({'height':(h*3)+'px','overflow':'hidden'});
me.removeClass('open');
me.addClass('closed');
$(this).html('<a href="#">closed</a>');
}
return false;
});
});
<div class="ec">
<ul>
<li>test 1</li>
<li>test 2</li>
<li>test 3</li>
<li>test 4</li>
<li>test 5</li>
<li>test 6</li>
<li>test 7</li>
<li>test 8</li>
<li>test 9</li>
</ul>
<div class="control"></div>
</div>
<div class="ec">
<ul>
<li>test 1</li>
<li>test 2</li>
<li>test 3</li>
<li>test 4</li>
<li>test 5</li>
<li>test 6</li>
<li>test 7</li>
<li>test 8</li>
<li>test 9</li>
</ul>
<div class="control"></div>
</div>
On Mar 11, 2:25 pm, mkmanning <[email protected]> wrote:
> And that's what I get for skipping the middle; basically the same
> solution as tres, just less code (and it works in IE6) :)
>
> On Mar 11, 11:21 am, mkmanning <[email protected]> wrote:
>
> > Here's a completely different (and admittedly problematic) approach.
> > Instead of creating new markup with a separate list, you could 'hide'
> > the LI's over a certain number with CSS, and then animate the
> > container. Here's a quick example:
>
> > JS:
> > $(document).ready(function(){
> > var ul = $('#myList'), l = ul.children('li'), h = l.height();
> > ul.css({'height':(h*5)+'px','overflow':'hidden'});
> > $('#myList-toggle').click(function(){
> >
> > ul.animate({'height':(ul.height()>(h*5)?(h*5):(l.length*h))+'px'});
> > return false;
> > });
>
> > });
>
> > HTML:
> > <a href="#" id="myList-toggle">Show the rest</a>
> > <ul id="myList">
> > <li>Item 1</li>
> > <li>Item 2</li>
> > <li>Item 3</li>
> > <li>Item 4</li>
> > <li>Item 5</li>
> > <li>Item 6</li>
> > <li>Item 7</li>
> > <li>Item 8</li>
> > <li>Item 9</li>
> > <li>Item 10</li>
> > </ul>
>
> > What makes it problematic? Well, if the user resizes the text after
> > you've calculated the height, it will be off (so if you want to
> > account for that you'd have to include text-resize detection, which
> > complicates the script; you'd have to decide if it's worth the extra
> > effort).
>
> > On Mar 11, 8:50 am, Brian <[email protected]> wrote:
>
> > > How would one go about adapting this to be used with multiple lists on
> > > one page.
>
> > > I have 3-5 lists on each page and would only like to show the first 3
> > > items of each with the ability to show the others.
>
> > > On Feb 17, 5:16 am, mofle <[email protected]> wrote:
>
> > > > I'm using IE6 natively on an XP machine. jQuery 1.3.1.
>
> > > > Any solution?
>
> > > > I don't get an error message in IE6, nothing happens when i click the
> > > > link.
>
> > > > Anyway, thanks for your help ;)
>
> > > > On Feb 13, 12:09 am, tres <[email protected]> wrote:
>
> > > > > After installing IE6, I didn't have any problems. It works just like
> > > > > it should. I have noticed differences in the multiple IEs and the
> > > > > actual IE, but those differences we're only when viewing the About
> > > > > Internet Explorer in the Help menu and when printing.
>
> > > > > Are you using ie6 in a VM, in it's original state on XP, or with
> > > > > multiple IE's? Another question would be, which version of jQuery are
> > > > > you using and have you cleared the ie6 cache?
>
> > > > > Sorry that didn't work for you.
>
> > > > > -Trey
>
> > > > > On Feb 13, 9:56 am, tres <[email protected]> wrote:
>
> > > > > > I'll install multiple IE's and get back to you.
>
> > > > > > -Trey
>
> > > > > > On Feb 12, 7:05 pm, mofle <[email protected]> wrote:
>
> > > > > > > Thanks, you're a genius.
>
> > > > > > > But it didn't work in IE6, where I need it.
>
> > > > > > > Any solution?
>
> > > > > > > On Feb 12, 12:32 am, tres <[email protected]> wrote:
>
> > > > > > > > Oh and also Safari 3.1.2 Windows.
>
> > > > > > > > -Trey
