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

Home Forums CSS How to open a div on click of a search button exactly below the search box.

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

    Here is my sample code What i want is, when user enters any location name (say New York) in search and press enter, div should be opened below it (in which i have plans to host google maps). The problem i am facing in placing the div. Can someone help me with it?

    Thanks in advance.

    Tom Houy

    You could apply a hover effect to the submit button with CSS, something like this:

    If you just use the Active state, it will only be visible when the button is pressed down. You would still need a little bit of javascript if you want the maps div to stay open after they release the mouse button.

    .testbox {
    background-color: #FF0;
    padding: 15px;
    height: 50px;
    width: 200px;
    display: none;
    .testbutton:hover + .testbox, .testbutton:active + .testbox {
    display: block;


    Hi Tom,
    You achieved this via padding, which would be good in fixed layouts. Since I am using bootstrap navbar, using padding won’t show div exactly below button. Can it be achieved with some other trick ?


    Why is placing the div an issue?

    Just put it place as normal, however you would do that normally if it were visible all the time and then hide it.

    When the button is clicked, use JS/JQ to show it.

    Doesn’t seem that hard to me.

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