How to toggle hide on second touch content vissibility

1

Currently I figured out how to make some content to display on first tap (see images below), problem is that I can’t manage to hide it back to the initial state on second tap/touch or tap/touch outside area where this content (buttons/title inside the “computer screen image”)
So first image is the default state (to which I need to toggle back)

143650_30062020
143650_30062020344×659 44.6 KB

And the second image (with grey color), is the other state that appears after the first tap and doesn’t go away/toggle.

Here’s the Javascript code ( I have tried with .toggleClass() instead of removeClass with no luck.

$(document).on("touchstart mouseenter", ".slide", function(e) {
  $(this).addClass('current-hoverv2');
});

$(document).on("mouseleave", ".slide", function(e) {
    $('.slide').removeClass('current-hoverv2');

});

And here the CSS:

.slide.current-hoverv2 .contenido-slide:before {
  opacity: 1;
  cursor: pointer;
  transition: all ease 1s;
  visibility: visible;
}

/* touch links*/
.slide.current-hoverv2 .contenido-text-links {
  visibility: visible;
  transition: all ease 0.8s;
  opacity:1;
}

.slide.current-hoverv2:hover .boton-detalles-portafolio {
    -webkit-animation: fadeInLeftcustom 1s;
    animation: fadeInLeftcustom 1s;
    
}

.slide.current-hoverv2:hover .boton-visitar-portafolio {
    -webkit-animation: fadeInRightcustom 1s;
    animation: fadeInRightcustom 1s;    
}
2

Hi,

You are targeting the entire document. ($(document)). How do you mouseleave the document? Maybe use a div that you can actually leave.

Greets,
Karin

3

Thank you! doesn’t “.slide” specified the div? Well tried this anyways but didn’t work. I don’t know what else to try honestly.

$('.slide').on("touchstart mouseenter", ".slide", function(e) {
  $(this).addClass('current-hoverv2');
});
$('.slide').on("mouseleave", ".slide", function(e) {
    $(this).removeClass('current-hoverv2');
});

Best regards!

4

This worked just fine.

$(document).on("touchstart mouseenter", ".slide", function(e) {
  e.stopPropagation();   
  if($(this).hasClass('current-hoverv2')){
          $(this).removeClass('current-hoverv2');
    }
    else{
         $(this).addClass('current-hoverv2');
    } 
});
5

Oh dear, I didn’t watch too closely.
A toggle function can’t be that complicated. There’s all those extra classes though.
What do you see in the inspector when you mouseleave? Has the class disappeared?
I think you will have to add a class that sets visibility to hidden. Could you try that?
Greets,
Karin

6

Well I actually have that and two other problems (should I post them in another topic?:

  1. When doing a mobile touch for the first time at the place were the buttons are, the buttons get clicked.

  2. Sometimes the div get “focused” with a blue background color. How do I prevent that?

  3. What you mention: touch outside of the area doesn’t hide/toggle it.
    I uploaded these changes to the server to help further debug it www.tomastestart.cl

  4. Had to remove mouseenter as it already was in another function

//hover/click
$(document).on("mouseenter", ".slick-current", function(e) {
  $('.slick-current').addClass('current-hover');
});
$(document).on("mouseleave", ".slick-current", function(e) {
    $('.slick-current').removeClass('current-hover');
});  

//  Touch 

$(document).on("touchstart", ".slide", function(e) {
  e.stopPropagation();   
  if($(this).hasClass('current-hoverv2')){
          $(this).removeClass('current-hoverv2');
    }
    else{
         $(this).addClass('current-hoverv2');
    } 
});
7

I’m going to have a long look at it.
Yes, open new topic.
I’ll get back to you.
Greets,Karin

8

Okey Done! Here’s the link https://forum.freecodecamp.org/t/problems-after-enabling-touch-toggle-content-jquery-features-for-mobile-screens/