Forums

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

Home Forums CSS Simple show hide divs

  • This topic is empty.
Viewing 2 posts - 1 through 2 (of 2 total)
  • Author
    Posts
  • #190902
    pvl123
    Participant

    http://codepen.io/pantata/pen/azNxgd

    Hi I cant find way how to make my web like this. Id like to have .toggle no pushing another divs, show it over others.

    http://1drv.ms/1uPDmr4

    #190912
    MattDiMu
    Participant

    I’m as well not sure, how the layout should finally look like, but some hints, that should help you to achieve your goal:

    To position your “.toggle”-divs in front of the other divs, you should use position absolute. e.g.

    #shortselect {
      position: relative; /* the toggle div shall be placed relative to this element, so we override position:static */
    }
    
    .toggle {
      position: absolute;
      top: 50px; /* adapt this to show the div at the desired position*/
    }
    
    

    Instead of directly manipulating the CSS with jQuery (which gets more complicated, the more CSS you add/remove), you should simply add, toggle and remove css classes, which then style the divs. e.g. $(<selector>).addClass(“showme”);
    $(<selector>).toggleClass(“showme”);
    $(<selector>).removeClass(“showme”);

    By the way – you should avoid the same id on multiple elements. Most browsers will autocorrect it, but an id should be a unique identifier

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