- This topic is empty.
November 18, 2010 at 11:23 am #30735
I am looking for advice on how to implement a “show more” sliding function on my home page. I have a list of images that is 5 rows high. I only want to show 3 of the rows and then have a text link “show more” under the third row. Clicking the “show more” would show the other 2 rows. This seems simple enough, but I do not even know where to start, or what to search for the get help.
If anyone can offer advice it would be much appreciated. Here is a link, that should give a better idea of what I am trying to do.November 18, 2010 at 11:47 am #74808
I was messing around with jquery to do stuff like this. If you view source on my this page from my site http://www.djave.co.uk/test/layout3/ you’ll see that the different divs go up and down.
The important bit would be to wrap the rows you aren’t showing in a div, or an id’d ul, or such like, and then have a jquery function at the top
November 18, 2010 at 11:49 am #74659
just fyi, in that example I’m imaging that the div/ ul containing the images has an id of theimages…
DaveNovember 18, 2010 at 11:56 am #74660
Argh… I think that is a little over my head. Going to look into trying to implement this though. No reason not to try what works best. I see your example and it is exactly what I am looking for, just have to rub some noobness off and get to it.November 18, 2010 at 12:09 pm #74662
it takes a bit of time to get all this stuff, the important bits are:
1. all that stuff I wrote above, that code should go in the <head> tags of the page.
2. rather than that line that says
instead use this one:
and it will load the code from google, i.e. you don’t have to download and put jquery on your site
3. the markup should be something along the lines of (but not exactly)
Show some more images
boom. See how the div is called theimages (that’s mentioned in the function) and the link you click has an id of “showmore”, (that’s also mentioned in the function) and is going to make it work…
PS. i’m a bit of a noob too so i hope this works – good luck!November 19, 2010 at 4:52 pm #74373
Is there any another way to achieve this?
Appreciate it fellas!
- The forum ‘CSS’ is closed to new topics and replies.