Test Your CSS Skills Number 41 - Expanding divs

As a teaser (and a big clue) before I post answers tomorrow here’s the full html from one of my examples.


<!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">
</style>
</head>

<body>
<div id="expand1">
		<p><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>
</div>
<div  id="expand2">
		<p><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>
</div>
</body>
</html>

Only css was added and the html remains as shown.

OK, I’ve had a crack at this. I was nearly there, but figured that I was missing something fancy in the HTML … yet I had exactly what you’ve posted above, so thought I’d better have another look. Attempt submitted. :slight_smile:

Thanks Ralph that’s working great and the CSS is pretty compact also.

Well done - I knew you could do it :slight_smile:

I’ll publish the entries later today and close the quiz.

Solution Time

Ok, time to wind this up and thanks for all the great entries. Without further ado I will link to some demos that show the technique in various guises so you can see it working before the explanations unfold.

demo1
demo2
demo3
demo4
demo5 (accordion)

As hinted in my clues the solution to this is based on using the CSS3 pseudo class :target selector. This allows you to apply styles to an element that is a target of a fragment identifier (the fragment identifier in a URI comprises a # character followed by an identifier name that matches the value of an id attribute of an element within the document e.g. <a href=“#backtotop”>To Top</a>). Not only can you target that element you could also target descendants and siblings using suitable css selectors.

Using this technique we can easily set the with of an element to say 80% when it is the target. The problem in the quiz was that at the same time you need to set the non target element to 20% which was a slight stumbling block for some of you. In fact the solution was pretty easy and instead of having the target apply to the current parent you just set the target higher up the tree and then you can climb back down the tree to find any element you need - almost like the much wished for parent selector.

In my first example I simply applied an id to the body element to achieve this to save any extra mark up.

Here’s the code from my basic demo that used floats.

Basic example:
Demo1


<!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">
.box1, .box2 {
	width:50%;
	background:red;
	float:left;
	margin:0 -1px 0 0;
	-webkit-transition: width 1s ease-in-out;
	-moz-transition: width 1s ease-in-out;
	-ms-transition: width 1s ease-in-out;
	-o-transition: width 1s ease-in-out;
	transition: width 1s ease-in-out;
	min-height:300px;
}
.box2 {
	float:right;
	margin:0 0 0 -1px;
	background:blue;
}
#expand1:target,#expand2:target div + div { width:80%; }
#expand1:target a.trigger,#expand2:target div + div a.trigger { display:none }
#expand1:target + div,#expand2:target div { width:20%;font-size:100% }
#expand1:target + div a.trigger,#expand2:target div a.trigger { display:block }
a.trigger {
	display:block;
	margin:0 0 10px;
	font-size:120%;
	text-align:center;
}
a, a:visited { color:#fff }
p { padding:5px; }
</style>
</head>

<body id="expand2">
<div id="expand1" class="box1">
		<p><a class="trigger" 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>
</div>
<div class="box2">
		<p><a class="trigger" 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>
</div>
</body>
</html>

As you can see the target is switched to the body tag and then it is a simple matter of climbing back down the html to find the elements you need to change.

Although this method works it could be improved a lot.:slight_smile:

If instead of floats we use display:table-cell we can have more concise code as the table-cells only one cell needs to get the width and the other cell will shrink as required. If we also combine this with the :not selector to hide the headings we don’t need the body id and we can also target the anchor using an attribute selector to match the fragment identifier.

Demo2


<!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">
#expand1,#expand2 {
	background:red;
	display:table-cell;
	padding:5px;
}
#expand2 {background:blue}
#expand1:target,#expand2:target {width:80%}
#expand1:target a[href="#expand1"],#expand2:target a[href="#expand2"] {display:none }
#expand1:not(:target) a[href="#expand1"],#expand2:not(:target) a[href="#expand2"]{ display:block }
a[href="#expand1"],
a[href="#expand2"]{
	display:block;
	margin:0 0 10px;
	font-size:120%;
	text-align:center;
}
a, a:visited { color:#fff }
</style>
</head>

<body>
<div id="expand1">
		<p><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>
</div>
<div  id="expand2">
		<p><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>
</div>
</body>
</html>

In the above the code is much reduced and you only need “#expand1:target,#expand2:target {width:80%}” to effect the changes. The anchor text is hidden by using the :not selector as we target the anchor that is not the current target. We can also target our trigger elements using an attribute selector to set the default.

e.g.


#expand1:target a[href="#expand1"],#expand2:target a[href="#expand2"] {display:none }
#expand1:not(:target) a[href="#expand1"],#expand2:not(:target) a[href="#expand2"]{ display:block }

So we set target anchors to display none and non target anchors to display block.

The above code works well and is very concise with no extra html markup needed. However, there is one slight drawback to this approach and if we wanted to animate the cells we would have a problem because webkit won’t animate from an auto width. Therefore for nice effect we need to change the code slightly and apply widths to our elements so that they can animate smoothly.

It makes no difference to the html but in the CSS we must utilise the :not selector again and apply widths to each element as required. This can be seen in the following demo and code:

[URL=“http://www.pmob.co.uk/temp/transition-2boxes-stretch4.htm”]
Demo3


<!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">
#expand1,#expand2 {
	background:red;
	display:table-cell;
	padding:5px;
	width:50%;
	-webkit-transition: width 1s ease-in-out;
	-moz-transition: width 1s ease-in-out;
	-ms-transition: width 1s ease-in-out;
	-o-transition: width 1s ease-in-out;
	transition: width 1s ease-in-out;
}
#expand2 {background:blue}
#expand1:target,#expand2:target {width:80%}
#expand1:not(target),#expand2:not(:target) {width:20%}
#expand1:target a[href="#expand1"],#expand2:target a[href="#expand2"] {display:none }
#expand1:not(:target) a[href="#expand1"],#expand2:not(:target) a[href="#expand2"]{ display:block }
a[href="#expand1"],
a[href="#expand2"]{
	display:block;
	margin:0 0 10px;
	font-size:120%;
	text-align:center;
}
a, a:visited { color:#fff }
</style>
</head>

<body>
<div id="expand1">
		<p><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>
</div>
<div  id="expand2">
		<p><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>
</div>
</body>
</html>

So there we have it. Two boxes that will stretch and grow as required. Using display:table-cell actually allows us to have as many columns as you like.

Here is an example with three columns.
Demo4

And indeed with a little thought you could easily turn this into a sliding gallery or accordion effect.
Demo5

And the winner is…
Well that’s enough of the explanations lets get down to the winners.

All the entries I received were working so it was hard to choose a winner as there were some interesting variations in the methods used.

In the end I have called it a tie between [B]CletusSpuckler /B and Ralph.m.

Johan was first in with the answer but then quickly came back with the more concise html that I wanted. I also awarded Ralph the tied first place because he was the only one to spot that display:table-cell would be very useful in this instance.

Some of the other entries also used interesting methods and Chris.Upjohn’s :checked inputs, nth-child and general sibling version was very interesting (if a little verbose):slight_smile:

CletusSpuckler’s first entry


<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>CSS Skills #41</title>
<style>
body {
	margin: 0;
	padding: 0;
}

.box1, .box2 {
	background: #f00;
	float: left;
	width: 50%;
	-moz-transition: all .3s;
	-ms-transition: all .3s;
	-o-transition: all .3s;
	-webkit-transition: all .3s;
	transition: all .3s;
}

.box2 {
	background: #00f;
}

a {
	color: #fff;
}

p {
	padding: .5em;
}

a[href="#box1"],
a[href="#box2"] {
	display: block;
	font-size: 1.5em;
	text-align: center;
}

#box1:target ~ .box1,
#box2:target ~ .box2 {
	width: 80%;
}

#box1:target ~ .box2,
#box2:target ~ .box1 {
	width: 20%;
}

#box1:target ~ .box1 a[href="#box1"],
#box2:target ~ .box2 a[href="#box2"] {
	display: none;
}
</style>
</head>

<body>
	<div id="box1"></div>
	<div id="box2"></div>
	<div class="box1">
		<p>
			<a href="#box1">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 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>
	</div>
	<div class="box2">
		<p>
			<a href="#box2">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 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>
	</div>
</body>
</html>

Cletus Spucklers Winning entry:


<!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">
body {
	margin: 0;
	padding: 0;
}

.box1, .box2 {
	background: #f00;
	float: left;
	width: 50%;
	-moz-transition: all .3s;
	-ms-transition: all .3s;
	-o-transition: all .3s;
	-webkit-transition: all .3s;
	transition: all .3s;
}

.box2 {
	background: #00f;
}

a {
	color: #fff;
}

p {
	padding: .5em;
}

a[href="#box1"],
a[href="#box2"] {
	display: block;
	font-size: 1.5em;
	text-align: center;
}

#box1:target,
#box2:target .box2 {
	width: 80%;
}

#box1:target ~ .box2,
#box2:target .box1 {
	width: 20%;
}

#box1:target a[href="#box1"],
#box2:target a[href="#box2"] {
	display: none;
}
</style>
</head>
<body id="box2">
<div id="box1" class="box1">
		<p><a href="#box1">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 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>
</div>
<div class="box2">
		<p><a href="#box2">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 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>
</div>
</body>
</html>

Ralphs Winning entry:


<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Untitled Document</title>
<style>
* {
	margin: 0;
	padding: 0;
}
#box1, #box2 { display: table-cell; }
#box1 { background: red; }
#box2 { background: blue; }
#box1:target, #box2:target { width: 80%; }
#box1:target a:first-child, #box2:target a:first-child { display: none; }
a { color: white; }
a:first-child {
	display: block;
	text-align: center;
	margin-bottom: 10px;
}
p { padding: 10px; }
</style>
</head>
<body>
<div id="box1">
		<p> <a href="#box1">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 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>
</div>
<div id="box2">
		<p> <a href="#box2">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 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>
</div>
</body>
</html>

I alos had correct entries from Guido, yurikolovsky and markBrown which follow here.

Guido:


<!DOCTYPE HTML>
<html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>Test your CSS skills 41</title>
    <style type="text/css">
#box1 {
	background-color:red;
	float: left;
	width: 50%;
}
#box2 {
	background-color:blue;
	float: left;
	width: 50%;
}
a { color:white; }
#box1:target { width: 80%; }
#box1:target > a { display: none; }
#box1:target + #box2 { width: 20%; }
#box2-trigger:target #box1 { width: 20%; }
#box2-trigger:target #box2 { width: 80%; }
#box2-trigger:target #box2 > a { display: none; }
</style>
    </head>
    <body>
				<div id="box2-trigger">
						<div id="box1"> <a href="#box1">Expand this box</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 this box" 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>
						</div>
						<div id="box2"> <a href="#box2-trigger">Expand this box</a>
								<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 this box" 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>
						</div>
				</div>
</body>
</html>

Yurikolovsky (first entry):


<!DOCTYPE html>
<html>
<head>
<title>CSS Quiz 41 - YuriKolovsky</title>
<style type="text/css">
a {
	color:#fff;
}
p {
	padding:5px;
}
.box1,
.box2 {
	background:red;
	float:left;
	width:50%;
}
.box2 {
	background:blue;
}
p a:first-child {
	text-align:center;
	font-size:large;
	display:block;
}
/*I wonder if :not(S) will also work, will try after sleep*/
div:target .box2,
div:target div .box1 {
	width:20%;
}
div:target .box1,
div:target div .box2 {
	width:80%;
}

div:target .box2 a:first-child,
div:target div .box1 a:first-child {
	display:none;
}
div:target .box1 a:first-child,
div:target div .box2 a:first-child {
	display:block;
}
</style>
</head>
<body>
		<div id="A">
		<div id="B">
		<div class="box1"><p><a href="#A">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 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="#0">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></div>
		<div class="box2"><p><a href="#B">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 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="#0">Can contain other links</a> lorem ipsum dolor sit amet lorem ipsum dolor sit amet lorem ipsum dolor sit amet</p></div>
		</div>
		</div>
</body>
</html>

Yurikolovsky (second entry):


<!DOCTYPE html>
<html  id="A">
<head>
<title>CSS Quiz 41 - YuriKolovsky</title>
<style type="text/css">
a {
	color:#fff;
}
p {
	padding:5px;
}
.box1,
.box2 {
	background:red;
	float:left;
	width:50%;
}
.box2 {
	background:blue;
}
p a:first-child {
	text-align:center;
	font-size:large;
	display:block;
}


#A:target .box2,
#B:target .box1 {
	width:20%;
}
#A:target .box1,
#B:target .box2 {
	width:80%;
}
#A:target .box1 a:first-child,
#B:target .box2 a:first-child {
	display:none;
}
</style>
</head>
<body id="B">
	<div class="box1"><p><a href="#A">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 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="#0">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></div>
	<div class="box2"><p><a href="#B">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 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="#0">Can contain other links</a> lorem ipsum dolor sit amet lorem ipsum dolor sit amet lorem ipsum dolor sit amet</p></div>
</body>
</html>

Mark.Brown4 entry:


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Untitled Document</title>
<style>
.box1, .box2 {
  float: left;
  width: 50%;
  background: red;
}
a { color: #fff }
.box2 { background: blue }
.box1 p, .box2 p {
  padding: 20px;
}
.box1 a:first-child, .box2 a:first-child {
  display: block;
  text-align: center;
}
#make-box1-active-and-shrink-box2:target .box1 { width: 80% }
#make-box1-active-and-shrink-box2:target .box1 a:first-child { display: none }
#make-box1-active-and-shrink-box2:target .box2 { width: 20% }
#make-box2-active-and-shrink-box1:target .box2 { width: 80% }
#make-box2-active-and-shrink-box1:target .box2 a:first-child { display: none }
#make-box2-active-and-shrink-box1:target .box1 { width: 20% }
</style>
</head>
<body id="make-box1-active-and-shrink-box2">
<div id="make-box2-active-and-shrink-box1">
  <div class="box1">
    <p><a href="#make-box1-active-and-shrink-box2">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 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>
  </div>
  <div class="box2">
    <p><a href="#make-box2-active-and-shrink-box1">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 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>
  </div>
</div>
</body>
</html>

Congratulations to all that took part and hope you enjoyed this little quiz which will have real life applications.

Ah, the thought never crossed my mind to put the id on the body! No need for my extra div.

I did. Can’t wait for the next one :slight_smile:

Almost forgot: great work Paul!

Hmmm…

Do you take alternatives?


<!DOCTYPE html>
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <title>Mitic&#259; - 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:


<!DOCTYPE html>
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <title>Mitic&#259; - 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.

Thanks for putting this all together, Paul. The uses of this are truly fascinating. I love your accordion demo. :slight_smile:

Indeed. It’s so simple when you are shown. I needlessly banged my head over this for days, when it was so darned obvious. :nono:

Hi Mitică,

[QUOTE=itmitică;5138993]Hmmm…
Do you take alternatives?
[/quote]

I’m always interested in alternatives although you won’t win anything for submitting after the solutions have been posted :slight_smile: 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.:slight_smile:

Here’s mine cut down to the minimum and no styling.


<!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). :slight_smile:

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.

Thanks for the quiz Paul, it’s always good to take a break from work and practice.

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. :slight_smile:

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.


<!DOCTYPE html>
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <title>Mitic&#259; - 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.

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 :stuck_out_tongue: (after the splendor of browser bugs that I was getting)

[QUOTE=itmitică;5139044]
webkit is such a PITA sometimes.[/QUOTE]

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

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.


<!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 :slight_smile:

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.

Nice work, Paul. That even works with tabbing, which is cool.

so cool

Yes, that’s a bonus :slight_smile:

Hi, great css example Paul

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?

Hi Debbie,

You can isolate the menu like so.


<!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:


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


<!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>