SitePoint Sponsor

User Tag List

Page 2 of 2 FirstFirst 12
Results 26 to 42 of 42
  1. #26
    Non-Member
    Join Date
    Feb 2012
    Posts
    892
    Mentioned
    10 Post(s)
    Tagged
    0 Thread(s)
    Hmmm...

    Do you take alternatives?

    HTML Code:
    <!DOCTYPE html>
    <html>
        <head>
            <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
            <title>Mitică - 80:20</title>
            <style type="text/css">
                
                p {
                    display: table-cell;
                }
                
                a[tabindex]:focus {
                    display: none;
                }
                
                a[tabindex="1"]:focus + a + p,
                a[tabindex="2"]:focus + p + p {
                    width: 80%;
                }
                
                a[tabindex="1"]:focus + a + p + p,
                a[tabindex="2"]:focus + p {
                    width: 20%;
                }
                
            </style>
        </head>
    
        <body>
            <a href="#" tabindex="1">Expand box1</a>
            <a href="#" tabindex="2">Expand box2</a>
            <p>Box1 - Both these divs are set to 50% each on page load but you may want to read them more easily by stretching one of the divs to be wider than the other but still keeping both readable and in the flow.  Click the link "Expand box1" at the top and the div will expand to 80% and tho other one to 20% width.  The link text is then removed on the expanded div and of course vice versa when the other link is clicked. Lorem ipsum dolor sit amet lorem ipsum dolor sit amet lorem ipsum dolor sit amet lorem ipsum dolor sit <a href="#">Can contain other links</a> amet lorem ipsum dolor sit amet lorem ipsum dolor sit amet lorem ipsum dolor sit amet lorem ipsum dolor sit amet</p>
            <p>Box2 - Both these divs are set to 50% each on page load but you may want to read them more easily by stretching one of the divs to be wider than the other but still keeping both readable and in the flow.  Click the link "Expand box2" at the top and the div will expand to 80% and tho other one to 20% width.  The link text is then removed on the expanded div and of course vice versa when the other link is clicked. Lorem ipsum dolor sit amet lorem ipsum dolor sit amet lorem ipsum dolor sit amet lorem ipsum dolor sit amet lorem ipsum dolor sit amet lorem ipsum dolor sit amet lorem ipsum dolor sit amet lorem ipsum dolor sit amet lorem ipsum dolor sit amet <a href="#">Can contain other links</a> lorem ipsum dolor sit amet lorem ipsum dolor sit amet lorem ipsum dolor sit amet</p>
        </body>
    </html>
    With :focus there is no need to click another link to reset to 50/50, you just click anywhere on the page, except on the two links. In your case, clicking another link to reset would mean the user would have to follow an outside link to get an inpage reset?

    My HTML is slimmer. And my CSS.

    If webkit would behave, it would only be this:

    HTML Code:
    <!DOCTYPE html>
    <html>
        <head>
            <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
            <title>Mitică - 80:20</title>
            <style type="text/css">
                
                p {
                    display: table-cell;
                }
                
                a[tabindex]:focus {
                    display: none;
                }
                
                a[tabindex="1"]:focus + a + p,
                a[tabindex="2"]:focus + p + p {
                    width: 80%;
                }
                
            </style>
        </head>
    
        <body>
            <a href="#" tabindex="1">Expand box1</a>
            <a href="#" tabindex="2">Expand box2</a>
            <p>Box1 - Both these divs are set to 50% each on page load but you may want to read them more easily by stretching one of the divs to be wider than the other but still keeping both readable and in the flow.  Click the link "Expand box1" at the top and the div will expand to 80% and tho other one to 20% width.  The link text is then removed on the expanded div and of course vice versa when the other link is clicked. Lorem ipsum dolor sit amet lorem ipsum dolor sit amet lorem ipsum dolor sit amet lorem ipsum dolor sit <a href="#">Can contain other links</a> amet lorem ipsum dolor sit amet lorem ipsum dolor sit amet lorem ipsum dolor sit amet lorem ipsum dolor sit amet</p>
            <p>Box2 - Both these divs are set to 50% each on page load but you may want to read them more easily by stretching one of the divs to be wider than the other but still keeping both readable and in the flow.  Click the link "Expand box2" at the top and the div will expand to 80% and tho other one to 20% width.  The link text is then removed on the expanded div and of course vice versa when the other link is clicked. Lorem ipsum dolor sit amet lorem ipsum dolor sit amet lorem ipsum dolor sit amet lorem ipsum dolor sit amet lorem ipsum dolor sit amet lorem ipsum dolor sit amet lorem ipsum dolor sit amet lorem ipsum dolor sit amet lorem ipsum dolor sit amet <a href="#">Can contain other links</a> lorem ipsum dolor sit amet lorem ipsum dolor sit amet lorem ipsum dolor sit amet</p>
        </body>
    </html>
    I could also climb down from body and have divs.

  2. #27
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,331
    Mentioned
    463 Post(s)
    Tagged
    8 Thread(s)
    Thanks for putting this all together, Paul. The uses of this are truly fascinating. I love your accordion demo.

    Quote Originally Posted by guido2004 View Post
    Ah, the thought never crossed my mind to put the id on the body! No need for my extra div.
    Indeed. It's so simple when you are shown. I needlessly banged my head over this for days, when it was so darned obvious.

  3. #28
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,549
    Mentioned
    183 Post(s)
    Tagged
    6 Thread(s)
    Hi Mitică,

    Quote Originally Posted by itmitică View Post
    Hmmm...
    Do you take alternatives?
    I'm always interested in alternatives although you won't win anything for submitting after the solutions have been posted Thanks for posting an alternative though as its always interesting to see different approaches.

    I did have versions working using :focus (and :hover) but found :target more reliable but as you have shown :focus will work quite well also.(I did note that both your demos aren't working properly in Safari (click expand box1 on first load and nothing happens)).

    The other reason I used :target was that it makes it more usable and the visitor actually has to click on another link to make the display reset rather than accidentally clicking anywhere on the page as you read. Although you could argue the opposite but I've always found this to be a limitation of using :focus as I have many old demos doing hide and show with :focus.

    My HTML is slimmer.
    lol it's only slimmer because you didn't wrap the p elements in a div and if the content ran to 3 or more paragraphs then you would need a wrapper and then it would be the same as my demo.

    Here's mine cut down to the minimum and no styling.
    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>Untitled Document</title>
    <style type="text/css">
    p{display:table-cell}
    p:target { width:80% }
    p:target a[href="#expand1"],p:target a[href="#expand2"] { display:none }
    p:not(:target) a[href="#expand1"],p:not(:target) a[href="#expand2"] { display:block }
    </style>
    </head>
    <body>
    <p id="expand1"><a href="#expand1">Expand this box</a>Box1  - Both these divs are set to 50% each on page load but you may want to read them more easily by stretching one of the divs to be wider than the other but still keeping both readable and in the flow. Click the link "Expand this box" at the top and the div will expand to 80% and the other one to 20% width. The link text is then removed on the expanded div and of course vice versa when the other link is clicked. Lorem ipsum dolor sit amet lorem ipsum dolor sit amet lorem ipsum dolor sit amet lorem ipsum dolor sit <a href="#">Can contain other links</a> amet lorem ipsum dolor sit amet lorem ipsum dolor sit amet lorem ipsum dolor sit amet lorem ipsum dolor sit amet</p>
    <p id="expand2"><a href="#expand2">Expand this box</a>Box2  Both these divs are set to 50% each on page load but you may want to read them more easily by stretching one of the divs to be wider than the other but still keeping both readable and in the flow. Click the link "Expand this box" at the top and the div will expand to 80% and the other one to 20% width. The link text is then removed on the expanded div and of course vice versa when the other link is clicked.  Lorem ipsum dolor sit amet lorem ipsum dolor sit amet lorem ipsum dolor sit amet lorem ipsum dolor sit amet lorem ipsum dolor sit amet lorem ipsum dolor sit amet lorem ipsum dolor sit amet lorem ipsum dolor sit amet lorem ipsum dolor sit amet <a href="#">Can contain other links</a> lorem ipsum dolor sit amet lorem ipsum dolor sit amet lorem ipsum dolor sit amet</p>
    </body>
    </html>
    That's about the same as yours bar a few odd characters and in my mind more a little more semantic (although I know html5 allows the anchors to be direct children of the body but I just don't like it - call me old fashioned ).

    Thanks for the alternative though and if anyone else has alternatives or indeed improvements to code already posted then feel free to post although you won't win any prizes (there weren't any prizes anyway).

  4. #29
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,549
    Mentioned
    183 Post(s)
    Tagged
    6 Thread(s)
    Quote Originally Posted by ralph.m View Post
    Thanks for putting this all together, Paul. The uses of this are truly fascinating. I love your accordion demo.
    Thanks Ralph and also thanks to everyone who took part and took the time to have a go at this. I always like seeing the different approaches that people have taken and the way that CSS can be made to do similar things but with different code.

  5. #30
    padawan silver trophybronze trophy markbrown4's Avatar
    Join Date
    Jul 2006
    Location
    Victoria, Australia
    Posts
    4,118
    Mentioned
    28 Post(s)
    Tagged
    2 Thread(s)
    Thanks for the quiz Paul, it's always good to take a break from work and practice.

  6. #31
    Non-Member
    Join Date
    Feb 2012
    Posts
    892
    Mentioned
    10 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Paul O'B View Post
    [...] you didn't wrap the p elements in a div and if the content ran to 3 or more paragraphs then you would need a wrapper and then it would be the same as my demo.
    If there were more peas in the pod, then I'd change p to div (or article, or something) in HTML and CSS and it'd work.

    But the reason I didn't include the expand links in the object itself is because those are not making sense at all in there. Like you're doing it, they are presentational content. Put them outside, like I did, and they become navigational content.

    HTML Code:
    <!DOCTYPE html>
    <html>
        <head>
            <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
            <title>Mitică - 80:20</title>
            <style type="text/css">
                
                article {
                    height: 6em;
                    overflow: hidden;
                }
                
                article:target {
                    height: 100%;
                }
                
            </style>
        </head>
    
        <body>
            <section>
                <header>
                    <nav>
                        <a href="#article1" tabindex="1">Article 1</a>
                        <span>|</span>
                        <a href="#article2" tabindex="2">Article 2</a>
                    </nav>
                </header>
                
                <article id="article1">
                    <h1>Article 1</h1>
                    <p>Box1 - Both these divs are set to 50% each on page load but you may want to read them more easily by stretching one of the divs to be wider than the other but still keeping both readable and in the flow.  Click the link "Expand box1" at the top and the div will expand to 80% and tho other one to 20% width.  The link text is then removed on the expanded div and of course vice versa when the other link is clicked. Lorem ipsum dolor sit amet lorem ipsum dolor sit amet lorem ipsum dolor sit amet lorem ipsum dolor sit <a href="#">Can contain other links</a> amet lorem ipsum dolor sit amet lorem ipsum dolor sit amet lorem ipsum dolor sit amet lorem ipsum dolor sit amet</p>
                    <p>Box1 - Both these divs are set to 50% each on page load but you may want to read them more easily by stretching one of the divs to be wider than the other but still keeping both readable and in the flow.  Click the link "Expand box1" at the top and the div will expand to 80% and tho other one to 20% width.  The link text is then removed on the expanded div and of course vice versa when the other link is clicked. Lorem ipsum dolor sit amet lorem ipsum dolor sit amet lorem ipsum dolor sit amet lorem ipsum dolor sit <a href="#">Can contain other links</a> amet lorem ipsum dolor sit amet lorem ipsum dolor sit amet lorem ipsum dolor sit amet lorem ipsum dolor sit amet</p>
                </article>
                
                <article id="article2">
                    <h1>Article 2</h1>
                    <p>Box2 - Both these divs are set to 50% each on page load but you may want to read them more easily by stretching one of the divs to be wider than the other but still keeping both readable and in the flow.  Click the link "Expand box2" at the top and the div will expand to 80% and tho other one to 20% width.  The link text is then removed on the expanded div and of course vice versa when the other link is clicked. Lorem ipsum dolor sit amet lorem ipsum dolor sit amet lorem ipsum dolor sit amet lorem ipsum dolor sit amet lorem ipsum dolor sit amet lorem ipsum dolor sit amet lorem ipsum dolor sit amet lorem ipsum dolor sit amet lorem ipsum dolor sit amet <a href="#">Can contain other links</a> lorem ipsum dolor sit amet lorem ipsum dolor sit amet lorem ipsum dolor sit amet</p>
                    <p>Box2 - Both these divs are set to 50% each on page load but you may want to read them more easily by stretching one of the divs to be wider than the other but still keeping both readable and in the flow.  Click the link "Expand box2" at the top and the div will expand to 80% and tho other one to 20% width.  The link text is then removed on the expanded div and of course vice versa when the other link is clicked. Lorem ipsum dolor sit amet lorem ipsum dolor sit amet lorem ipsum dolor sit amet lorem ipsum dolor sit amet lorem ipsum dolor sit amet lorem ipsum dolor sit amet lorem ipsum dolor sit amet lorem ipsum dolor sit amet lorem ipsum dolor sit amet <a href="#">Can contain other links</a> lorem ipsum dolor sit amet lorem ipsum dolor sit amet lorem ipsum dolor sit amet</p>
                </article>
            </section>
        </body>
    </html>
    The problem of reset in width/height is still a problem to me, not a feature. If no other link on the page points to a local fragment, you can't really get a reset. Refreshing doesn't help, it's now current to a fragment. And even when there is such a link, you have to click on it.


    <hr>


    Interesting bug in Saf with :focus. Ch works but it has the same core issue with :focus.

    webkit is such a PITA sometimes.

  7. #32
    Hibernator YuriKolovsky's Avatar
    Join Date
    Nov 2007
    Location
    Malaga, Spain
    Posts
    1,072
    Mentioned
    4 Post(s)
    Tagged
    0 Thread(s)
    Yeah, the solutions were much more varied that I expected, always nice to have that happen!!
    Thanks again Paul, this was a great quiz!

    P.S.
    I knew that display:table-cell would be useful, just chose not to use it (after the splendor of browser bugs that I was getting)

  8. #33
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,549
    Mentioned
    183 Post(s)
    Tagged
    6 Thread(s)
    Quote Originally Posted by itmitică View Post
    webkit is such a PITA sometimes.
    Yes, it has some old bugs that don't seem to get fixed and :focus is an old one along with using the adjacent selector (and other selectors) after hovering (e.g. a:hover + p {background: red} will work but a:hover + p + p{background:red} won't work! )

  9. #34
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,549
    Mentioned
    183 Post(s)
    Tagged
    6 Thread(s)
    As Mitică has shown above you can also create vertical collapsing elements although the main problem is that you can't animate to an auto height which makes it not quite so useful as horizontal unless you have fixed height content. (I don't know why they (browser makers) didn't include animation to auto because 90% of the time that's what you want.)

    Here's an example but the fixed height is a bit of a show-stopper unless it was fixed height images in a gallery perhaps. Interesting all the same.

    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>Untitled Document</title>
    <style type="text/css">
    html, body {
    	margin:0;
    	padding:0
    }
    html { background:#000 }
    body {
    	width:800px;
    	margin:auto;
    	position:relative;
    	background:#fff;
    	padding:5px 5px 50px;
    }
    h1, h2 {
    	text-align:center;
    	margin:0 0 1em;
    	font-size:140%
    }
    h2 { text-align:left }
    div {
    	position:relative;
    	height:10em;
    	overflow:hidden;
    	border-bottom:1px dotted #000;
    	-webkit-transition: height 1s ease-in-out;
    	-moz-transition: height 1s ease-in-out;
    	-ms-transition: height 1s ease-in-out;
    	-o-transition: height 1s ease-in-out;
    	transition: height 1s ease-in-out;
    }
    a[href^="#article"], a[href^="#collapse"] {
    	position:absolute;
    	bottom:5px;
    	right:10px;
    	background:#000;
    	color:#fff;
    	padding:0 5px;
    	line-height:1.5em;
    }
    a[href^="#collapse"] { visibility:hidden;background:#CC00CC }
    :target {
    	height:20em;
    	background:#ccc
    }
    :target a[href^="#article"] { visibility:hidden }
    :target a[href^="#article"] + a { visibility:visible }
    </style>
    </head>
    
    <body>
    <h1>Using :target to Expand Elements</h1>
    <div id="article1">
    		<h2>Article1 Heading</h2>
    		<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas elit leo, pharetra sed placerat eu, rhoncus a nulla. Curabitur mattis orci quis quam sodales rutrum. Cras id pellentesque diam. Nunc vitae nulla id nunc ultrices mattis. Duis vestibulum turpis eget massa lacinia nec feugiat tellus molestie. Aenean quis tellus dolor. Praesent ac velit sapien, vitae malesuada elit. Vivamus scelerisque erat eget ipsum facilisis eu posuere elit blandit. Morbi et risus et velit malesuada varius quis ut velit.</p>
    		<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas elit leo, pharetra sed placerat eu, rhoncus a nulla. Curabitur mattis orci quis quam sodales rutrum. Cras id pellentesque diam. Nunc vitae nulla id nunc ultrices mattis. Duis vestibulum turpis eget massa lacinia nec feugiat tellus molestie. Aenean quis tellus dolor. Praesent ac velit sapien, vitae malesuada elit. Vivamus scelerisque erat eget ipsum facilisis eu posuere elit blandit. Morbi et risus et velit malesuada varius quis ut velit. <a href="#article1">Read more</a> <a href="#collapse">Read Less</a></p>
    </div>
    <div id="article2">
    		<h2>Article2 Heading</h2>
    		<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas elit leo, pharetra sed placerat eu, rhoncus a nulla. Curabitur mattis orci quis quam sodales rutrum. Cras id pellentesque diam. Nunc vitae nulla id nunc ultrices mattis. Duis vestibulum turpis eget massa lacinia nec feugiat tellus molestie. Aenean quis tellus dolor. Praesent ac velit sapien, vitae malesuada elit. Vivamus scelerisque erat eget ipsum facilisis eu posuere elit blandit. Morbi et risus et velit malesuada varius quis ut velit.</p>
    		<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas elit leo, pharetra sed placerat eu, rhoncus a nulla. Curabitur mattis orci quis quam sodales rutrum. Cras id pellentesque diam. Nunc vitae nulla id nunc ultrices mattis. Duis vestibulum turpis eget massa lacinia nec feugiat tellus molestie. Aenean quis tellus dolor. Praesent ac velit sapien, vitae malesuada elit. Vivamus scelerisque erat eget ipsum facilisis eu posuere elit blandit. Morbi et risus et velit malesuada varius quis ut velit. <a href="#article2">Read more</a> <a href="#collapse">Read Less</a></p>
    </div>
    <div id="article3">
    		<h2>Article3 Heading</h2>
    		<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas elit leo, pharetra sed placerat eu, rhoncus a nulla. Curabitur mattis orci quis quam sodales rutrum. Cras id pellentesque diam. Nunc vitae nulla id nunc ultrices mattis. Duis vestibulum turpis eget massa lacinia nec feugiat tellus molestie. Aenean quis tellus dolor. Praesent ac velit sapien, vitae malesuada elit. Vivamus scelerisque erat eget ipsum facilisis eu posuere elit blandit. Morbi et risus et velit malesuada varius quis ut velit.</p>
    		<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas elit leo, pharetra sed placerat eu, rhoncus a nulla. Curabitur mattis orci quis quam sodales rutrum. Cras id pellentesque diam. Nunc vitae nulla id nunc ultrices mattis. Duis vestibulum turpis eget massa lacinia nec feugiat tellus molestie. Aenean quis tellus dolor. Praesent ac velit sapien, vitae malesuada elit. Vivamus scelerisque erat eget ipsum facilisis eu posuere elit blandit. Morbi et risus et velit malesuada varius quis ut velit. <a href="#article3">Read more</a> <a href="#collapse">Read Less</a></p>
    </div>
    <div id="article4">
    		<h2>Article4 Heading</h2>
    		<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas elit leo, pharetra sed placerat eu, rhoncus a nulla. Curabitur mattis orci quis quam sodales rutrum. Cras id pellentesque diam. Nunc vitae nulla id nunc ultrices mattis. Duis vestibulum turpis eget massa lacinia nec feugiat tellus molestie. Aenean quis tellus dolor. Praesent ac velit sapien, vitae malesuada elit. Vivamus scelerisque erat eget ipsum facilisis eu posuere elit blandit. Morbi et risus et velit malesuada varius quis ut velit.</p>
    		<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas elit leo, pharetra sed placerat eu, rhoncus a nulla. Curabitur mattis orci quis quam sodales rutrum. Cras id pellentesque diam. Nunc vitae nulla id nunc ultrices mattis. Duis vestibulum turpis eget massa lacinia nec feugiat tellus molestie. Aenean quis tellus dolor. Praesent ac velit sapien, vitae malesuada elit. Vivamus scelerisque erat eget ipsum facilisis eu posuere elit blandit. Morbi et risus et velit malesuada varius quis ut velit. <a href="#article4">Read more</a> <a href="#collapse">Read Less</a></p>
    </div>
    </body>
    </html>
    I'm sure some of you can come up with better designed examples

  10. #35
    Hibernator YuriKolovsky's Avatar
    Join Date
    Nov 2007
    Location
    Malaga, Spain
    Posts
    1,072
    Mentioned
    4 Post(s)
    Tagged
    0 Thread(s)
    I don't know why they (browser makers) didn't include animation to auto because 90% of the time that's what you want.
    Can't agree more.

  11. #36
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,331
    Mentioned
    463 Post(s)
    Tagged
    8 Thread(s)
    Nice work, Paul. That even works with tabbing, which is cool.

  12. #37
    SitePoint Member
    Join Date
    Jun 2012
    Posts
    1
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    so cool

  13. #38
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,549
    Mentioned
    183 Post(s)
    Tagged
    6 Thread(s)
    Quote Originally Posted by ralph.m View Post
    Nice work, Paul. That even works with tabbing, which is cool.
    Yes, that's a bonus

  14. #39
    SitePoint Member
    Join Date
    Jul 2012
    Location
    Netherlands
    Posts
    3
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hi, great css example Paul

    Quote Originally Posted by Paul O'B View Post
    Here's an example but the fixed height is a bit of a show-stopper unless it was fixed height images in a gallery perhaps. Interesting all the same.
    I tried putting this inside a div with an id for example "wrapcollapsediv" so i can better target the css.
    else it will prolly give my other divs this css too:
    #wrapcollapsediv div {
    position:relative;
    height:10em;
    overflow:hidden;
    border-bottom:1px dotted #000;
    -webkit-transition: height 1s ease-in-out;
    -moz-transition: height 1s ease-in-out;
    -ms-transition: height 1s ease-in-out;
    -o-transition: height 1s ease-in-out;
    transition: height 1s ease-in-out;
    }

    can anyone help me to also auto size this div
    #wrapcollapsediv

    i tried with auto height, min and max height but didn't succeed yet.

    Anyone ideas?

  15. #40
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,549
    Mentioned
    183 Post(s)
    Tagged
    6 Thread(s)
    Hi Debbie,

    You can isolate the menu like so.

    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>Untitled Document</title>
    <style type="text/css">
    html, body {
    	margin:0;
    	padding:0
    }
    html { background:#000 }
    body {
    	width:800px;
    	margin:auto;
    	position:relative;
    	background:#fff;
    	padding:5px 5px 50px;
    }
    h1, h2 {
    	text-align:center;
    	margin:0 0 1em;
    	font-size:140%
    }
    h2 { text-align:left }
    .wrap div {
    	position:relative;
    	height:10em;
    	overflow:hidden;
    	border-bottom:1px dotted #000;
    	-webkit-transition: height 1s ease-in-out;
    	-moz-transition: height 1s ease-in-out;
    	-ms-transition: height 1s ease-in-out;
    	-o-transition: height 1s ease-in-out;
    	transition: height 1s ease-in-out;
    }
    .wrap a[href^="#article"], .wrap a[href^="#collapse"] {
    	position:absolute;
    	bottom:5px;
    	right:10px;
    	background:#000;
    	color:#fff;
    	padding:0 5px;
    	line-height:1.5em;
    }
    .wrap a[href^="#collapse"] { visibility:hidden;background:#CC00CC }
    .wrap :target {
    	height:20em;
    	background:#ccc
    }
    .wrap :target a[href^="#article"] { visibility:hidden }
    .wrap :target a[href^="#article"] + a { visibility:visible }
    </style>
    </head>
    
    <body>
    <h1>Using :target to Expand Elements</h1>
    <div class="wrap">
    <div id="article1">
    		<h2>Article1 Heading</h2>
    		<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas elit leo, pharetra sed placerat eu, rhoncus a nulla. Curabitur mattis orci quis quam sodales rutrum. Cras id pellentesque diam. Nunc vitae nulla id nunc ultrices mattis. Duis vestibulum turpis eget massa lacinia nec feugiat tellus molestie. Aenean quis tellus dolor. Praesent ac velit sapien, vitae malesuada elit. Vivamus scelerisque erat eget ipsum facilisis eu posuere elit blandit. Morbi et risus et velit malesuada varius quis ut velit.</p>
    		<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas elit leo, pharetra sed placerat eu, rhoncus a nulla. Curabitur mattis orci quis quam sodales rutrum. Cras id pellentesque diam. Nunc vitae nulla id nunc ultrices mattis. Duis vestibulum turpis eget massa lacinia nec feugiat tellus molestie. Aenean quis tellus dolor. Praesent ac velit sapien, vitae malesuada elit. Vivamus scelerisque erat eget ipsum facilisis eu posuere elit blandit. Morbi et risus et velit malesuada varius quis ut velit. <a href="#article1">Read more</a> <a href="#collapse">Read Less</a></p>
    </div>
    <div id="article2">
    		<h2>Article2 Heading</h2>
    		<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas elit leo, pharetra sed placerat eu, rhoncus a nulla. Curabitur mattis orci quis quam sodales rutrum. Cras id pellentesque diam. Nunc vitae nulla id nunc ultrices mattis. Duis vestibulum turpis eget massa lacinia nec feugiat tellus molestie. Aenean quis tellus dolor. Praesent ac velit sapien, vitae malesuada elit. Vivamus scelerisque erat eget ipsum facilisis eu posuere elit blandit. Morbi et risus et velit malesuada varius quis ut velit.</p>
    		<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas elit leo, pharetra sed placerat eu, rhoncus a nulla. Curabitur mattis orci quis quam sodales rutrum. Cras id pellentesque diam. Nunc vitae nulla id nunc ultrices mattis. Duis vestibulum turpis eget massa lacinia nec feugiat tellus molestie. Aenean quis tellus dolor. Praesent ac velit sapien, vitae malesuada elit. Vivamus scelerisque erat eget ipsum facilisis eu posuere elit blandit. Morbi et risus et velit malesuada varius quis ut velit. <a href="#article2">Read more</a> <a href="#collapse">Read Less</a></p>
    </div>
    <div id="article3">
    		<h2>Article3 Heading</h2>
    		<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas elit leo, pharetra sed placerat eu, rhoncus a nulla. Curabitur mattis orci quis quam sodales rutrum. Cras id pellentesque diam. Nunc vitae nulla id nunc ultrices mattis. Duis vestibulum turpis eget massa lacinia nec feugiat tellus molestie. Aenean quis tellus dolor. Praesent ac velit sapien, vitae malesuada elit. Vivamus scelerisque erat eget ipsum facilisis eu posuere elit blandit. Morbi et risus et velit malesuada varius quis ut velit.</p>
    		<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas elit leo, pharetra sed placerat eu, rhoncus a nulla. Curabitur mattis orci quis quam sodales rutrum. Cras id pellentesque diam. Nunc vitae nulla id nunc ultrices mattis. Duis vestibulum turpis eget massa lacinia nec feugiat tellus molestie. Aenean quis tellus dolor. Praesent ac velit sapien, vitae malesuada elit. Vivamus scelerisque erat eget ipsum facilisis eu posuere elit blandit. Morbi et risus et velit malesuada varius quis ut velit. <a href="#article3">Read more</a> <a href="#collapse">Read Less</a></p>
    </div>
    <div id="article4">
    		<h2>Article4 Heading</h2>
    		<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas elit leo, pharetra sed placerat eu, rhoncus a nulla. Curabitur mattis orci quis quam sodales rutrum. Cras id pellentesque diam. Nunc vitae nulla id nunc ultrices mattis. Duis vestibulum turpis eget massa lacinia nec feugiat tellus molestie. Aenean quis tellus dolor. Praesent ac velit sapien, vitae malesuada elit. Vivamus scelerisque erat eget ipsum facilisis eu posuere elit blandit. Morbi et risus et velit malesuada varius quis ut velit.</p>
    		<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas elit leo, pharetra sed placerat eu, rhoncus a nulla. Curabitur mattis orci quis quam sodales rutrum. Cras id pellentesque diam. Nunc vitae nulla id nunc ultrices mattis. Duis vestibulum turpis eget massa lacinia nec feugiat tellus molestie. Aenean quis tellus dolor. Praesent ac velit sapien, vitae malesuada elit. Vivamus scelerisque erat eget ipsum facilisis eu posuere elit blandit. Morbi et risus et velit malesuada varius quis ut velit. <a href="#article4">Read more</a> <a href="#collapse">Read Less</a></p>
    </div>
    </div>
    </body>
    </html>
    As I mentioned in my post above you can't animate to auto height as transitions don't work that way unfortunately. If you change the height here to auto:

    Code:
    .wrap :target {
    	height:auto;/* was 20em;*/
    	background:#ccc
    }
    Now the height is auto height and will open to content height but you will lose the sliding transition. there is no way around that I'm afraid.

    You could instead animate opacity to give a fade effect instead.

    e.g.
    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>Untitled Document</title>
    <style type="text/css">
    html, body {
    	margin:0;
    	padding:0
    }
    html { background:#000 }
    body {
    	width:800px;
    	margin:auto;
    	position:relative;
    	background:#fff;
    	padding:5px 5px 50px;
    }
    h1, h2 {
    	text-align:center;
    	margin:0 0 1em;
    	font-size:140%
    }
    h2 { text-align:left }
    .wrap div {
    	position:relative;
    	height:10em;
    	overflow:hidden;
    	border-bottom:1px dotted #000;
    		-webkit-transition: all 2s ease-in-out;
    	-moz-transition: all 2s ease-in-out;
    	-o-transition: all 2s ease-in-out;
    	-ms-transition: all 2s ease-in-out;
    	transition: all 2s ease-in-out;
    	opacity:0.5
    }
    .wrap a[href^="#article"], .wrap a[href^="#collapse"] {
    	position:absolute;
    	bottom:5px;
    	right:10px;
    	background:#000;
    	color:#fff;
    	padding:0 5px;
    	line-height:1.5em;
    }
    .wrap a[href^="#collapse"] { visibility:hidden;background:#CC00CC }
    .wrap :target {
    	height:auto;
    	background:#ccc;
    	opacity:1;
    }
    .wrap :target a[href^="#article"] { visibility:hidden }
    .wrap :target a[href^="#article"] + a { visibility:visible }
    </style>
    </head>
    
    <body>
    <h1>Using :target to Expand Elements</h1>
    <div class="wrap">
    <div id="article1">
    		<h2>Article1 Heading</h2>
    		<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas elit leo, pharetra sed placerat eu, rhoncus a nulla. Curabitur mattis orci quis quam sodales rutrum. Cras id pellentesque diam. Nunc vitae nulla id nunc ultrices mattis. Duis vestibulum turpis eget massa lacinia nec feugiat tellus molestie. Aenean quis tellus dolor. Praesent ac velit sapien, vitae malesuada elit. Vivamus scelerisque erat eget ipsum facilisis eu posuere elit blandit. Morbi et risus et velit malesuada varius quis ut velit.</p>
    		<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas elit leo, pharetra sed placerat eu, rhoncus a nulla. Curabitur mattis orci quis quam sodales rutrum. Cras id pellentesque diam. Nunc vitae nulla id nunc ultrices mattis. Duis vestibulum turpis eget massa lacinia nec feugiat tellus molestie. Aenean quis tellus dolor. Praesent ac velit sapien, vitae malesuada elit. Vivamus scelerisque erat eget ipsum facilisis eu posuere elit blandit. Morbi et risus et velit malesuada varius quis ut velit. <a href="#article1">Read more</a> <a href="#collapse">Read Less</a></p>
    </div>
    <div id="article2">
    		<h2>Article2 Heading</h2>
    		<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas elit leo, pharetra sed placerat eu, rhoncus a nulla. Curabitur mattis orci quis quam sodales rutrum. Cras id pellentesque diam. Nunc vitae nulla id nunc ultrices mattis. Duis vestibulum turpis eget massa lacinia nec feugiat tellus molestie. Aenean quis tellus dolor. Praesent ac velit sapien, vitae malesuada elit. Vivamus scelerisque erat eget ipsum facilisis eu posuere elit blandit. Morbi et risus et velit malesuada varius quis ut velit.</p>
    		<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas elit leo, pharetra sed placerat eu, rhoncus a nulla. Curabitur mattis orci quis quam sodales rutrum. Cras id pellentesque diam. Nunc vitae nulla id nunc ultrices mattis. Duis vestibulum turpis eget massa lacinia nec feugiat tellus molestie. Aenean quis tellus dolor. Praesent ac velit sapien, vitae malesuada elit. Vivamus scelerisque erat eget ipsum facilisis eu posuere elit blandit. Morbi et risus et velit malesuada varius quis ut velit. <a href="#article2">Read more</a> <a href="#collapse">Read Less</a></p>
    </div>
    <div id="article3">
    		<h2>Article3 Heading</h2>
    		<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas elit leo, pharetra sed placerat eu, rhoncus a nulla. Curabitur mattis orci quis quam sodales rutrum. Cras id pellentesque diam. Nunc vitae nulla id nunc ultrices mattis. Duis vestibulum turpis eget massa lacinia nec feugiat tellus molestie. Aenean quis tellus dolor. Praesent ac velit sapien, vitae malesuada elit. Vivamus scelerisque erat eget ipsum facilisis eu posuere elit blandit. Morbi et risus et velit malesuada varius quis ut velit.</p>
    		<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas elit leo, pharetra sed placerat eu, rhoncus a nulla. Curabitur mattis orci quis quam sodales rutrum. Cras id pellentesque diam. Nunc vitae nulla id nunc ultrices mattis. Duis vestibulum turpis eget massa lacinia nec feugiat tellus molestie. Aenean quis tellus dolor. Praesent ac velit sapien, vitae malesuada elit. Vivamus scelerisque erat eget ipsum facilisis eu posuere elit blandit. Morbi et risus et velit malesuada varius quis ut velit. <a href="#article3">Read more</a> <a href="#collapse">Read Less</a></p>
    </div>
    <div id="article4">
    		<h2>Article4 Heading</h2>
    		<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas elit leo, pharetra sed placerat eu, rhoncus a nulla. Curabitur mattis orci quis quam sodales rutrum. Cras id pellentesque diam. Nunc vitae nulla id nunc ultrices mattis. Duis vestibulum turpis eget massa lacinia nec feugiat tellus molestie. Aenean quis tellus dolor. Praesent ac velit sapien, vitae malesuada elit. Vivamus scelerisque erat eget ipsum facilisis eu posuere elit blandit. Morbi et risus et velit malesuada varius quis ut velit.</p>
    		<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas elit leo, pharetra sed placerat eu, rhoncus a nulla. Curabitur mattis orci quis quam sodales rutrum. Cras id pellentesque diam. Nunc vitae nulla id nunc ultrices mattis. Duis vestibulum turpis eget massa lacinia nec feugiat tellus molestie. Aenean quis tellus dolor. Praesent ac velit sapien, vitae malesuada elit. Vivamus scelerisque erat eget ipsum facilisis eu posuere elit blandit. Morbi et risus et velit malesuada varius quis ut velit. <a href="#article4">Read more</a> <a href="#collapse">Read Less</a></p>
    </div>
    </div>
    </body>
    </html>

  16. #41
    SitePoint Member
    Join Date
    Jul 2012
    Location
    Netherlands
    Posts
    3
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Paul O'B View Post
    You can isolate the menu like so.
    Paul,
    thank you very much for explaining this to me now i see were i went wrong. I added style declarations for the wrap div that weren't necessary and made it work contrarily.

  17. #42


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
  •