change :hover to click/tap function on mobile/touch devices not working

Question

So, I'm trying to change the :hover function to a click function using Modernizr's no-touch / touch class for specific elements (captions) on a page. And in theory, this should work, but somehow it's only clickable once on a mobile/touch device, meaning that if I click/tap it again, it won't "un-hover" . I can "un-hover" by tapping at another element on the page, but would very much like the caption to disappear when <figure> clicked/tapped again.

If I change the js so that it's the no-touch devices having to click, it works fine. What am I missing here?

Fiddle: https://fiddle.jshell.net/bh3aLkcL/3/

I'm afraid my js skills are quite poor to say the least (read: non-existing), and I've been using a snippet from another post: Change hover interaction to click for touch screen devices

The rest works, so it's just that one thing. Any help is greatly appreciated!

Javascript:

// For hovering becoming click via Modernizr
//$('body').hasClass('no-touch') ? event = 'mouseenter mouseleave' : event = 'click';
!$('body').hasClass('no-touch') ? event = 'mouseenter mouseleave' : event = 'click';

$('.design-section figure').on(event, function () {
$(this).toggleClass('open');
});

HTML:

<section id="work" class="content-section text-left" data-offset="100px">
<div class="design-section">
    <div class="container">
        <div class="col-lg-8 col-lg-offset-2">
            <img src="http://cutepuppyclub.com/wp-content/uploads/2015/05/White-Cute-Puppy-.jpg" width="100%" class="img-responsive" alt="Playing the dilemma game">
            <figure>
                <figcaption>
                    <p>test text</p>
                </figcaption>
            </figure>
       </div>
    </div>
</div>
</section>

CSS:

figure {
    padding: 0;
    margin-top: 0;
    position: relative;
    display: block;
    overflow: hidden;
}

figcaption {
    position: absolute;
    background: rgba(0,0,0,.3);
    color: #fff;
}

figure.open figcaption {
    -ms-filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=100);
    filter: alpha(opacity=100);
    opacity: 1;
}

.design-section figcaption {
  opacity: 0;
  bottom: -30%; 
  left: 0;
  -webkit-transition: all 0.6s ease;
  -moz-transition:    all 0.6s ease;
  -o-transition:      all 0.6s ease;
  padding: 0;
  width:100%;
  display:block;
}

.design-section figure {
    height:120px;
    margin-top:-120px;
    z-index:1;
}

.design-section img {
    padding-top:0;
    margin-top:14px;
    z-index:0;
}

.design-section figcaption p {
    margin:0;
    padding: 1.5% 2.5%;
    font-size:15px;
}

.design-section figure.open figcaption{
    bottom: 0;
}

PS I'm using Bootstrap, but that shouldn't have anything to say in this matter.

Answer 1

You don't need to use Modernizr for checking touch events, you could do it this way :

var event = ('ontouchstart' in window) ? 'click' : 'mouseenter mouseleave';

$('.design-section figure').on(event, function () {
    $(this).toggleClass('open');
});

Also, your using of Conditional (ternary) Operator is wrong, I fixed it. Read about right syntax .

Answer 2

you can specify multiple events as a parameter so just include the touchstart to add an action when a user clicks on mobile.

$('.design-section figure').on('mouseover mouseout touchstart', function () {
    $(this).toggleClass('open');
});