title: Changing hover function to click/touch on Mobile devices
body: <p>I currently have content that is shown when a link is hovered upon for desktop/ laptops. <strong>How can i change this to click for touch/ mobile devices as sometimes i need to double tab on the link to show the content?</strong></p>
  
  <p>I am using the code below to identify if the user has touched the screen to change to a click function</p>
  
  <pre><code>window.addEventListener('touchstart', function onFirstTouch() {
  // we could use a class
  document.body.classList.add('user-is-touching');
  
  // or set some global variable
  window.USER_IS_TOUCHING = true;
  
  // or set your app's state however you normally would
  </code></pre>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>$(".o-c").hover(function() {
    $('.home-o-c').show();
    $('.home-i-t').hide();
  }, function() {
    $('.home-o-c').hide();
    $('.home-i-t').show();
  });
  
  $(".c-f").hover(function() {
    $('.home-c-f').show();
    $('.home-i-t').hide();
  }, function() {
    $('.home-c-f').hide();
    $('.home-i-t').show();
  });
  
  $(".i-c").hover(function() {
    $('.home-i-c').show();
    $('.home-i-t').hide();
  }, function() {
    $('.home-i-c').hide();
    $('.home-i-t').show();
  });
  
  
  $(".c-u").hover(function() {
    $('.home-c-u').show();
    $('.home-i-t').hide();
  }, function() {
    $('.home-c-u').hide();
    $('.home-i-t').show();
  });
  
  window.addEventListener('touchstart', function onFirstTouch() {
    // we could use a class
    document.body.classList.add('user-is-touching');
  
    // or set some global variable
    window.USER_IS_TOUCHING = true;
  
    // or set your app's state however you normally would
  
  
    // we only need to know once that a human touched the screen, so we can stop listening now
    window.removeEventListener('touchstart', onFirstTouch, false);
  }, false);
  
  
  $(".o-c").click(function() {
    if ($('body').hasClass('user-is-touching')) {
      $('.home-o-c').show();
  
  
  
    } else {
      $('html, body').animate({
        scrollTop: $(".our-company").offset().top
      }, 2000);
  
    }
  });
  
  $(".c-f").click(function() {
    if ($('body').hasClass('user-is-touching')) {
      $('.home-c-f').show();
      $('.home-o-c').hide();
      $('.home-i-c').hide();
      $('.home-c-u').hide();
      $('.home-i-t').hide();
  
  
  
    } else {
      $('html, body').animate({
        scrollTop: $(".cf2").offset().top
      }, 2000);
  
    }
  });</code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code>.left-fill {
    background: #0000006b;
    height: 100vh;
  }
  
  .right-fill {
    background: pink;
    height: 100vh;
  }
  
  .vc_col-sm-6 {
    width: 50%;
    float: left;
  }
  
  .pivot-nav {
    list-style: none;
    font-family: 'Montserrat';
    text-align: left;
  }
  
  .pivot-nav li a {
    font-size: 1.6rem;
    font-weight: 700;
    text-transform: uppercase;
    display: inline-block;
    position: relative;
    color: #fff;
    text-decoration: none;
    line-height: 40px;
  }
  
  .pivot-nav li a.default-underline::after,
  .pivot-nav li a:hover::after {
    width: 100%;
  }
  
  .pivot-nav:hover a.default-underline:not(:hover)::after {
    width: 0;
  }
  
  .pivot-nav li a::after {
    bottom: 0;
    content: "";
    display: block;
    height: 4px;
    position: absolute;
    background: #fff;
    transition: width 0.3s ease 0s;
    width: 0;
  }
  
  .home-o-c,
  .home-c-f,
  .home-i-c,
  .home-c-u {
    display: none;
  }
  
  .our-company {
    clear: both;
    display: block;
    height: 50vh;
  }
  
  .cf2 {
    clear: both;
    display: block;
    height: 50vh;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.9.1/jquery.min.js"&gt;&lt;/script&gt;
  
  &lt;body&gt;
  
    &lt;div class="left-fill text-left wpb_column vc_column_container vc_col-sm-6"&gt;
  
      &lt;div class="wpb_wrapper"&gt;
        &lt;p class="home-i-t"&gt;TEXT One&lt;/p&gt;
        &lt;p class="home-o-c"&gt;TEXT One&lt;/p&gt;
        &lt;p class="home-c-f"&gt;TExt for C f.&lt;/p&gt;
        &lt;p class="home-i-c"&gt;Some more text fo i c.&lt;/p&gt;
        &lt;p class="home-c-u"&gt;Get in touch &lt;/p&gt;
  
      &lt;/div&gt;
    &lt;/div&gt;
  
  
  
    &lt;div class="home-fill right-fill text-right wpb_column vc_column_container vc_col-sm-6"&gt;
  
      &lt;div class="wpb_wrapper"&gt;
        &lt;ul class="pivot-nav"&gt;
          &lt;li class="pivot-nav-item"&gt;&lt;a class="o-c default-underline" href="#" data-toggle="my-scrollspy-2"&gt;O C&lt;/a&gt;&lt;/li&gt;
          &lt;li class="pivot-nav-item"&gt;&lt;a class="c-f" href="#" data-toggle="my-scrollspy-2"&gt;C F&lt;/a&gt;&lt;/li&gt;
          &lt;li class="pivot-nav-item"&gt;&lt;a class="i-c" href="#" data-toggle="my-scrollspy-2"&gt;I C&lt;/a&gt;&lt;/li&gt;
          &lt;li class="pivot-nav-item" data-toggle="my-scrollspy-2"&gt;&lt;a class="c-u" href="#"&gt;C U&lt;/a&gt;&lt;/li&gt;
        &lt;/ul&gt;
  
      &lt;/div&gt;
    &lt;/div&gt;
  
    &lt;div class="our-company"&gt;
      Our Company Scroll Down
  
    &lt;/div&gt;
  
    &lt;div class="cf2"&gt;
      cf2 Scroll Down
  
    &lt;/div&gt;
  
  &lt;/body&gt;</code></pre>
  </div>
  </div>
  </p>