Forums

The forums ran from 2008-2020 and are now closed and viewable here as an archive.

Home Forums CSS A “show more” sliding function to reveal more of a page.

  • This topic is empty.
Viewing 6 posts - 1 through 6 (of 6 total)
  • Author
    Posts
  • #30735
    burtflaxton
    Participant

    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.

    http://turbodieselpower.com/

    #74808
    sheepysheep60
    Participant

    Hi!

    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




    #74659
    sheepysheep60
    Participant

    just fyi, in that example I’m imaging that the div/ ul containing the images has an id of theimages…

    Dave

    #74660
    burtflaxton
    Participant

    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.

    #74662
    sheepysheep60
    Participant

    : )

    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
    <script type=”text/javascript” src=”jquerymin.js”></script>

    instead use this one:

    <script type=”text/javascript” src=”http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js”></script&gt;

    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)





    ... etc


    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!

    #74373
    burtflaxton
    Participant

    I was never able to get this to fully work. I had it almost working, but for some reason it caused an error to happen when someone would try to add a product to the cart because of some other javascript. When I clicked “show more” it would add the item to the cart of the page I was on.

    Is there any another way to achieve this?

    Appreciate it fellas!

Viewing 6 posts - 1 through 6 (of 6 total)
  • The forum ‘CSS’ is closed to new topics and replies.