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

Home Forums CSS Expandable divs ?

  • This topic is empty.
Viewing 7 posts - 1 through 7 (of 7 total)
  • Author
  • #41518

    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.

    Andy Howells

    Please create a [codepen]( 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.

    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;


    Here’s a fork of your pen

    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).


    Thank you @wolfcry911


    How would I link up the js to my code?


    @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)
  • The forum ‘CSS’ is closed to new topics and replies.