Is there a CSS code for 'double click' element or another way to solve this?

Question

I have two texts that are hidden at first display:none and if I click on object1 a text below it will appear, if I click on object2 another text will appear, but the first text disappears.

Then I can click on object1 again to make the second text disappear and the first appear.

But I can't get the texts to display:none; again because I have to have an object selected now after clicking on one of them.

My question now is if there is a CSS code like:

If object1/object2 is clicked twice, text1 AND text 2 will be display:none again like in the beginning.

Answer 1

Use jQuery:

$('#obj1').dblclick(function(){
    $('text2').toggle();
});

-- EDIT to better version --

<div class="textToHide">Text1</div>
<div class="textToHide">Text2</div>
<div id="myDblClickObj">Click me to hide other objects</div>
<script>
$('#myDblClickObj').dblclick(function(){
    $('.textToHide').toggle();
});
</script>

Answer 2

A very simple CSS way to do an "accordion" like behavior is with the CSS psuedo element :target, which appears to have full support on current browsers (claim based on caniuse.com link given)

Basically :target works if the #id in the URL matches the ID of the element, like so:

#text {
  transition: all linear 0.3s;
  visibility: hidden;
  height: 0;
  width: 0;
}
#text:target {
  height: 300px;
  width: 300px;
  visibility: visible;
}

<a href="#text"> Click me to Show something </a>
<br />
<textarea id="text"></textarea>

This can be chained together with other links + items by tweaking the CSS and HTML a little.

.special-section-name textarea {
  transition: all linear 0.3s;
  visibility: hidden;
  height: 0;
  width: 0;
}
.special-section-name textarea:target {
  visibility: visible;
  height: 400px;
  width: 450px;
}

<div class="special-section-name">
  <a href="#text1">Text 1</a>
  <br />
  <textarea id="text1"></textarea>
</div>

<div class="special-section-name">
  <a href="#text2">Text 2</a>
  <br />
  <textarea id="text2"></textarea>
</div>

If you want something to work by "double clicking" (clicking twice in a row), you're going to need a solution outside of CSS. Let me know if that works for you.

Answer 3

If you don't need to support relics, you can do this entirely natively via CSS and HTML, by leveraging the :checked pseudoclass, the + selector, label tags, and input type="radio".

.accord-tog{ display:none; }
.accord-button{ display:block; }
.accord-content{ display:none; }
.accord-tog:checked + .accord-button + .accord-content{ display:block; }

<input type="radio" name="accord$1" id="accord$1$1" class="accord-tog" />
<label for="accord$1$1" class="accord-button">Object 1</label>
<div class="accord-content">Text 1</div>
<input type="radio" name="accord$1" id="accord$1$2" class="accord-tog" />
<label for="accord$1$2" class="accord-button">Object 2</label>
<div class="accord-content">Text 2</div>

For a version that is more animated (and using checkboxes instead (thus why one doesn't close the other)), see my answer over here.

If you want to add close-on-click-again support, you'll need to use JS, sadly.

Answer 4

I am not sure whether I understand your question correctly, but if you want a pure CSS Double-click implementation able to keep its current double-click-toggle state, I can show you my code. It uses 2 piled checkboxes and an animation. The first checkbox "starts to process a double-click", and the second one keeps the current toggled state.

In the snippet below (switch it better to fullpage), double-click the purple box. Than double-click it again. This code does not use JavaScript, it is CSS-only. Note also, that single-clicks do nothing, only double-clicks apply.

@keyframes show1 {
  from {
    visibility: hidden;    
  }
  to {
    visibility: visible;    
  }
}
@keyframes show2 {
  from {
    visibility: hidden;
  }
  to {
    visibility: visible;
  }
}

@keyframes show3 {
  from {
    visibility: hidden;
  }
  to {
    visibility: visible;
  }
}

@keyframes show4 {
  from {
    visibility: hidden;
  }
  to {
    visibility: visible;
  }
}


#click, #click2 {
  display: none;
}

#single-click, #single-click2 {  
  width: 100px;
  height: 100px;
  position: absolute;
  cursor: pointer;  
}

#single-click {
  animation: show1 200ms steps(1);
}

#click:checked ~ #single-click {
  animation: show2 200ms steps(1);
}

#single-click2 {
  animation: show3 200ms steps(1);
}

#click2:checked ~ #single-click2 {
  animation: show4 200ms steps(1);
}

p {
  opacity: 0;
}

#click:checked ~ p {
  opacity: 1;
}

/*Other stuff*/

body {
  /*tap support*/
  touch-action: none;  
}

.size {
  width: 100px;
  height: 100px;  
}

#single-click {
  background-color: #3366CC;
}

#single-click2 { 
  background-color: #6C36C3; 
}

<html>
  <head>
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">
  </head>

  <body>
  <h1>CSS Double Click</h1>
  <h3>Double click detection without Javascript</h3>
  <h4>The enhanced version from https://codepen.io/ejsado/pen/EaFsy</h4>
  <div class="size">
    <input type="checkbox" id="click">
    <label id="single-click" for="click"></label>
    <input type="checkbox" id="click2">
    <label id="single-click2" for="click2"></label>    
    <div class="size"></div>
    <p class='menu-content'>You double clicked!</p>
  </div>
  <div class="size"></div>
  <h4>The colored box is a square checkbox label.</h4>
  <h4>It hides another square checkbox label of the same size (but of the different color).</h4>  
  <h4>When the top checkbox label is clicked, it triggers an animation which hides it for 200ms,</h4>
  <h4>and allows the bottom checkbox label to be checked.</h4>
  <h4>If the user is quick enough to check the bottom checkbox label, the success message appears.</h4>
  <h4>It is worth to note, that once the success message appeared, it can be removed only</h4>
  <h4>by either a new double-click or a page reload.</h4>
  </body>
</html>