SitePoint Sponsor

User Tag List

Results 1 to 4 of 4
  1. #1
    SitePoint Enthusiast
    Join Date
    Sep 2012
    Posts
    33
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Pure CSS Collapse/Expand

    Hey Folks,

    I was try to create a expand/collapse feature and found an article about how to do it with only using CSS. The author also stated that for IE 8 you won't be able to see the expand / collapse feature.

    Here is the code I am currently using:



    <head>
    <title>Sample for Siteponit Forum</title>
    <meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
    <style type="text/css">
    * {font-size: 100%; font-family: "liberation sans", arial, sans-serif; color: black; }
    .tran15 { -o-transition: all 1.5s;-moz-transition: all 1.5s;-webkit-transition: all 1.5s; }
    .tran2 { -o-transition: all 2s;-moz-transition: all 2s;-webkit-transition: all 2s; }
    #nav { padding: 1ex; border: 2px solid #aaa; background-color: #ccf; margin: 1em; width: 20em; }
    #nav:hover { border: 2px solid #ddd; background-color: #eef; }
    #nav h2 { display: inline; vertical-align: middle; }

    .hide, .show { display: none; font-size: 80%; vertical-align: middle; }

    @media all and (min-width:1px) { .hide, .show { display: inline; } }

    a.hide:focus + .show { display: inline; }
    .show { display: none; }
    a.hide:focus { display: none; }

    #menu { opacity: 1; height:7em; margin-top: 0em; width: auto; margin-left: -1ex; overflow: hidden; }
    a.hide:focus ~ #menu { opacity: 0; height: 0em; }

    @media print {
    .hide, .show { display: none; }
    #nav {position: static; border: none; width: auto;}
    #menu {width: auto;}
    }
    </style>
    </head>
    <body>
    <div>

    <p>&nbsp;</p>
    <div id="nav" class="tran2">
    <h2>Will it work?</h2>
    <a href="#" class="hide">[hide]</a>
    <a href="#" class="show">[show]</a>
    <ol id="menu" class="tran15">
    <br>Hurray it worked!</ol>
    </div>
    </body>
    </html>

    My first question is how can I change it so that the table does not start out being expand?
    Secondly, would you recommend using only CSS or can it cause problems in the long run?

    Thx a lot
    Shibbs

  2. #2
    SitePoint Wizard bronze trophy chris.upjohn's Avatar
    Join Date
    Apr 2010
    Location
    Melbourne, AU
    Posts
    2,189
    Mentioned
    17 Post(s)
    Tagged
    1 Thread(s)
    Depending on the browsers you wish to support would be the key around how you go about designing something like a hide/show with only CSS and you still should always consider IE 7/8 to be part of the browsers that may visit your site there for JavaScript would be needed as a fallback if you choose to use only CSS.

    In saying that I would recommend you do use JavaScript as the amount of code you would need to write would be so small it will outweigh the benefits of using only CSS which can be a nightmare to get right.

  3. #3
    SitePoint Enthusiast 3dy.ro's Avatar
    Join Date
    Feb 2011
    Posts
    37
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by chris.upjohn View Post
    Depending on the browsers you wish to support would be the key around how you go about designing something like a hide/show with only CSS and you still should always consider IE 7/8 to be part of the browsers that may visit your site there for JavaScript would be needed as a fallback if you choose to use only CSS.
    But if you're going to use JavaScript as a fallback, you might as well only use it to create the whole collapse/expand system from the beginning, since you can't really ignore IE7 & IE8... yet.

  4. #4
    SitePoint Wizard bronze trophy chris.upjohn's Avatar
    Join Date
    Apr 2010
    Location
    Melbourne, AU
    Posts
    2,189
    Mentioned
    17 Post(s)
    Tagged
    1 Thread(s)
    Quote Originally Posted by 3dy.ro View Post
    But if you're going to use JavaScript as a fallback, you might as well only use it to create the whole collapse/expand system from the beginning, since you can't really ignore IE7 & IE8... yet.
    That really depends on how advanced the functionality needs to get, if you know what your coding is only going to fail in IE 7/8 then you could simply use the a conditional statement to load in a small snippet of JavaScript for only those browsers. Of course your are also right in saying that you should do this from the start which makes things a lot easier to maintain but as browsers become more advanced and the technology surrounding them becomes better CSS will become a more viable solution to creating pure sliders, accordians etc...


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •