Grow your CSS skills. Land your dream job.

Expandable divs ?

  • # December 21, 2012 at 5:45 pm

    Hi There,
    I am trying to create a site that is just a list of items from the top down. Ie – words in large font. All of which are centered on a page.

    I would like to be able to have a user click on a word which would then expand a box that shows more information as well as changing the background color and text color across the full length of the page 100%.
    Contained in that box would be a narrow container with paragraph info.

    First of all i am having trouble setting up my html with the associated divs that might allow for this.

    Secondly, I am thinking this will have to happen by jquery.

    Any help would be much appreciated.

    # December 21, 2012 at 5:46 pm

    Please create a [codepen](http://codepen.io) of what you have already so we can add code and edit to help you achieve what you want.

    JQuery will probably be the best solution for this.

    # December 21, 2012 at 6:01 pm

    http://codepen.io/joe/full/jwcKl
    Ok, one more issue. I wanted to add an underline on link-hover on the nav and it’s bumping down the container upon hover… I made the link

    a:hover {
    border-bottom: 2px solid;
    position: relative;
    }

    # December 21, 2012 at 8:46 pm

    Here’s a fork of your pen
    http://codepen.io/wolfcry911/pen/urGlg

    To solve the underline bumping the container down I simply put a transparent border on the normal state. You could also change the height/line-height for the same effect, but this works well enough.

    You should include all the info for the page in the html (unless you wanted to use ajax, but I think for a small page I’d avoid that route), then with javascript hide the text and add a function to reveal on click. My example was just thrown together – hopefully someone with more jqueryfoo will come along and clean it up (and make it smoother).

    # December 21, 2012 at 9:01 pm

    Thank you @wolfcry911

    # December 22, 2012 at 1:54 am

    How would I link up the js to my code?

    # December 22, 2012 at 7:14 pm

    @wofcry911 struggling with trying to ge the js to automatically cose one expanded div when clicking on another. Also for some reason when closing a div the background color disappears and then the blox slides up. Any idea?

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

You must be logged in to reply to this topic.

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