How to use double click instead of one click in the following codes?

Question

How can I give command the following codes to work when user double clicks not one click?

$(function () { 
       $(".SpanHoma").on("click", function () {
          $(this).find(".RitualsGroup").toggle(); // this will check which one is clicked currently
       }); 
    });
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class= "SpanHoma">
  <span>A</span>
  <div class= "RitualsGroup" style = "display:none;">
    <li>c</li>
    <li>d</li>
    <li>e</li>
   </div>
</div>

<div class= "SpanHoma">
  <span>B</span>
  <div class= "RitualsGroup" style = "display:none;">
    <li>f</li>
    <li>g</li>
    <li>h</li>
   </div>
</div>

Please anyone can help me

Please don't spam unrelated language tags. This is a quick way towards getting a question down-voted — Hovercraft Full Of Eels, Feb 01 '20 at 13:27

Mamun · Accepted Answer · 2020-02-01T13:31:32.450

Use dblclick instead of click:

The dblclick event fires when a pointing device button (such as a mouse's primary button) is double-clicked; that is, when it's rapidly clicked twice on a single element within a very short span of time.

$(function () { 
  $(".SpanHoma").on("dblclick", function () {
    $(this).find(".RitualsGroup").toggle(); // this will check which one is clicked currently
  }); 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class= "SpanHoma">
  <span>A</span>
  <div class= "RitualsGroup" style = "display:none;">
    <li>c</li>
    <li>d</li>
    <li>e</li>
   </div>
</div>

<div class= "SpanHoma">
  <span>B</span>
  <div class= "RitualsGroup" style = "display:none;">
    <li>f</li>
    <li>g</li>
    <li>h</li>
   </div>
</div>

@SchadrackRurangwa, you are most welcome:) – Mamun Feb 01 '20 at 13:31 — Mamun, Feb 01 '20 at 13:31

How to use double click instead of one click in the following codes?

1 Answers1