Double click to reduce the size of div?

advertisements

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">
    <li>
        <a href="#first" class="accordion-header">First</a>
        <div class="accordion-content" id="first">
        <p>Bonjour</p></div>
        </li>

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

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

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;
}

Fiddle