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.
PS. : In case you missed the other tests you can find them all listed here: