Test Your CSS Skills Number 41 - Expanding divs

CSS - Test Your CSS Skills Number 41 - Expanding divs: Quiz now ended - solution in post #24

Important:
Don’t post your answers in this thread but PM with the details instead so that all can have a go.

It’s been a while since we had a test your skills CSS quiz and as usual there are no prizes other than the satisfaction of accomplishing an awkward task. The following task is pretty straight forward and should be something that you can complete in your coffee break once you realise the mechanism that needs to be used.

The task is this:

Using only CSS (no scripting or expressions allowed but css3 is necessary) the task is two take two divs that occupy 50% of the page and then when clicking on an appropriate link one div will expand to 80% and the other div will shrink to 20% (and vice versa) while both remaining in the flow of the page.

First take a look at the attachment which show exactly how the elements must look and perform.[B]

(You’ll have to click on the image attachment and then click on it again when it opens to get the full size or you won’t be able to read it.)

Note[/B] also that on the expanded div the “Expand this box” text is removed because it is already expanded.

The text and links in each column must act as a normal column so make sure the page is working properly when you PM me the solution. Also note that when any other link is clicked (apart from the two “expanding” links) then the layout can return to two divs of 50% (you probably won’t be able to stop this happening anyway if you’ve done it right.)

I’m pretty lax on rules as I like to see people thinking out of the box and I will award the winner based on either the best solution or the most innovative or indeed the one that matches the requirements exactly.

Rules

No scripting allowed but the result must work from IE9+.

CSS3 allowed

Vendor extensions allowed if you want to do a nice animated transition from 80% to 20% and vice versa

Use your own html as required but obviously the cleaner and more compact the code the better.

To save you a little typing here is the html for the text in the divs but you will need to add html to this to make it work (unless of course you find a better way to do it).


		<div class="box1"><p><a href="#">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="#">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>

Remember this is just for fun and there are no prizes. Your reward will be knowing how smart you are.

Don’t post your answers in this thread but PM with the details instead so that all can have a go.

Have fun.:slight_smile:

PS. : In case you missed the other tests you can find them all listed here:

Starting on it now as i just can’t resist finishing it tonight :slight_smile:

lol - good luck Chris :slight_smile:

If anything is unclear in my rules or description then just shout and I will clarify.

Sent you a PM :slight_smile:

Wow - entries coming in already :slight_smile:

I have correct Entries from CletusSpuckler and Chris.upJohn so well done Guys.

Guido2004 is close to a solution but struggling on the second part at the moment but I’m sure will have it solved soon.

The quiz will remain open for a few days to allow other to take part and to test their CSS skills.

Remember to try for the most compact html you can or alternatively come up with something that you feel is more innovative.

Oh this one looks great! will definitely have a go

Thanks Timo :slight_smile:

Guido2004 has now sent an updated solution that is fully working. Well done :slight_smile:

yep, I’m definitely having trouble with this one, discovered so many new browser “features” that I never knew about already.

Yes that’s half the point of these quizzes as it makes you look outside your normal routines and to try something new.

I’m sure you’ll crack it in the end.

Thanks to a hint from Paul, I have the solution.
It’s a really good quiz by the way :slight_smile:

Well done Timo, You got it :slight_smile:

Anyone else struggling? I’ll hand out some clues in a couple of days if you are.

Ok, seems to be a little quiet around here so I will start throwing clues later.

For those of you that have completed this you may want to try and improve the code you are using and this is the html that I am using in my demo.


<!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>
</head>
<body>
<div class="box1">
		<p><a href="#">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="#">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>

No extra elements really necessary (although I have removed some attributes like class names and ids etc otherwise that would be too easy).

As to anyone else trying this the key to this is remain focussed on the target (that’s a red herring and a clue).

ha! I knew your html was like that! and I know how you did it! :stuck_out_tongue:

Well done Timo, I have your second entry and the html is much the same as mine above :slight_smile:

I think this technique could be useful for accessibility as you could also enlarge the text at the same time thus making sections easier to read.

Yes, it would be useful for text size adjustments, though still not as reliable as when done with JavaScript.

The first thing that I thought was that you could do with pure CSS is a F.A.Q. page with a list of questions, clicking the question expands it and shows the detailed answer, with CSS3 animations and everything lol.
Though it would probably break my favorite Q or Ctrl+F key combination.

I have another entry form CletusSpuckler which also uses the reduced html. Well done Johan.

I’ll post all the solutions on Wednesday so if anyone else wants to try you have another day or so to do it :slight_smile:

I’m back now, so will try and solve this today :slight_smile: It’s been years since I’ve tried one of these quizzes.

Thanks Mark, I have your entry and it works fine. Well done and thanks for taking part.

Anyone else who wants to try you have until Wednesday to get your entries in.