Grow your CSS skills. Land your dream job.

Changing DIV on clicked Link

  • # June 5, 2012 at 10:40 pm

    My idea is such: On my about page I would like to have a container whose content (a couple of paragraphs) can change based on a selected link, but I don’t want the whole page to reload, or the container to resize. Just the text change. Does this make sense and is there an easy way to do this using CSS or a jQuery plugin? I saw two examples on this site, but they weren’t precisely the same…

    # June 6, 2012 at 3:15 am

    Yes…it is really easy to load content into a div or other element…e.g.


    $("#container").load("content-to-load.html");

    obviously you will need to set it up to work when you click the given links…but you get the jest.

    # June 6, 2012 at 12:11 pm

    Actually the “obviously” part is where I’m stuck….Also, I don’t want to load new HTML, just replacement text. As in About Us is General info, then they can click “people” to read about management, if that makes any sense.

    # June 6, 2012 at 1:33 pm

    I think something like this is what you mean?

    http://jsfiddle.net/2FNv6/

    if you do not want the container to change height, simply set a fixed height for the container.

    # June 7, 2012 at 8:21 pm

    Exactly! Thanks so much!

    # April 19, 2013 at 6:16 am

    This works great, but how can you make it so if you click another link it goes back to the old content? Sort of like tabs..

    Thanks a bunch.

    # April 19, 2013 at 12:41 pm

    Tabs are actually built into the jquery ui library:
    http://jqueryui.com/tabs/

    Probably don’t need all of that if this is the only thing you will be using, but theres some other stuff in there that could be helpful if you are a jquery beginner and are looking to add some interesting ui elements to sites.

    # April 19, 2013 at 2:35 pm

    Conveniently this is a bit of JavaScript i know that allows you to replace content with onclick. I created this pen for you.[PEN](http://codepen.io/Jarolin/pen/mntks “”)

Viewing 8 posts - 1 through 8 (of 8 total)

You must be logged in to reply to this topic.

*May or may not contain any actual "CSS" or "Tricks".