Double click to reduce the size of div?


Hi I was just wondering if there was a way of double clicking on a div and making the height reduce just by using CSS.

<div class="container"></div>
    <ul class="accordion">
        <a href="#first" class="accordion-header">First</a>
        <div class="accordion-content" id="first">

        <a href="#second" class="accordion-header">Second</a>
        <div class="accordion-content" id="second">

        <a href="#third" class="accordion-header">Third</a>
        <div class="accordion-content" id="third">

You can find the code that I want to adjust in this Fiddle.

This is achievable in CSS only, if you can add the following HTML immediately after each <div class="accordion-content">:

<a href="#"></a><input>

Then add these styles:

.accordion-content {
  position: relative;

.accordion-content a, .accordion-content input {
  position: absolute;
  height: 100%;
  width: 100%;
  opacity: 0;

.accordion-content input:focus {
  z-index: -1;

.accordion-content a:focus {
  z-index: 1;