If/else statement not working correctly with .html(); and font-awesome icons

Question

I have a video content banner that has a text overlay that has 2 states:

State 1: (Font awesome play icon) Watch In Full
State 2: (Font awesome cross icon) Collapse View

Here is a jS fiddle to show this working (without the font awesome icons):

https://jsfiddle.net/vanstone/4xmabz1f/3/

Here is a jS fiddle to show this not working (with the font awesome icons):

https://jsfiddle.net/vanstone/4xmabz1f/4/

The problem I have is that the text toggles correctly in this example, but when I load in the icons on my site it always runs the else statement from the below jS:

<script>
jQuery("#videoWrapper").click(function() {

   var videoText = jQuery(".watch-full-tag p").html();

   if (videoText === '<i class="fas fa-times-circle"></i> Collapse View') {
      jQuery(".watch-full-tag p").html('<i class="fas fa-play-circle"></i> Watch In Full');
// it runs the below on every click event
   } else {
      jQuery(".watch-full-tag p").html('<i class="fas fa-times-circle"></i> Collapse View');
   }

});
</script>

This is resulting in the initial State 1 being changed to State 2 on the first click, but then remaining as State 2 on every click thereafter.

My question is how do I get my if/else statement to run correctly using icons, is this related to use of < i > inside .html();?

Instead of trying to match the html string why not just check the class of the icon element itself? — charlietfl
Still the same issue sadly: jsfiddle.net/vanstone/4xmabz1f/7 — van
But why do you extract the html() at all and not check the actual element in the DOM? — charlietfl

Taha Metin Bayi Taha Metin Bayi · Accepted Answer · 2020-06-23T11:56:34

This should solve your issue.

function removeCursor() {
  setTimeout(function(){
    jQuery(".typed-cursor").remove();
  }, 2650);
}

removeCursor();


jQuery("#videoWrapper").click(function(e) {
     e.preventDefault();
      if(jQuery("#videoWrapper").hasClass("full")) {
         jQuery("#videoWrapper").animate({"height": "400px"}).removeClass("full");
        jQuery(".site-header, .site-header--sticky-spacer").slideDown("100");
      } else {
        jQuery("#videoWrapper").animate({"height": "92vh"}).addClass("full");
        jQuery(".site-header, .site-header--sticky-spacer").slideUp("100");
      }
   });

jQuery("#videoWrapper").click(function() {

   var videoText = jQuery(".watch-full-tag p").html();

   if (jQuery(".watch-full-tag p > i").hasClass('fa-times-circle')) {
      jQuery(".watch-full-tag p").html('<i class="fas fa-play-circle"></i> Watch In Full');

   } else {
      jQuery(".watch-full-tag p").html('<i class="fas fa-times-circle"></i> Collapse View');
   }

});

/* VIDEO CSS */
video {
    width: 100%;
    height: auto;
}

#videoWrapper {
    width: 100%;
    height: 400px;
    display: block;
    background-color: #000000;
}

#videoWrapper.full {
    display: block!important;
    height: 92vh;
}

.watch-full-tag p {
    position: absolute;
    bottom: 30px;
    display: block;
    background: transparent;
    left: 45px;
    color: #bdbdbd;
    font-size: 13px;
    font-family: Helvetica, Arial;
    opacity: 0.3;
    transition: 0.3s ease-in-out all;
    -webkit-transition: 0.3s ease-in-out all;
    -moz-transition: 0.3s ease-in-out all;
    -o-transition: 0.3s ease-in-out all;
    -ms-transition: 0.3s ease-in-out all;
}

#videoWrapper:hover .watch-full-tag p {
    opacity: 1;
    transition: 0.3s ease-in-out all;
    -webkit-transition: 0.3s ease-in-out all;
    -moz-transition: 0.3s ease-in-out all;
    -o-transition: 0.3s ease-in-out all;
    -ms-transition: 0.3s ease-in-out all;
}

@media screen and (max-width: 768px) {
    #videoWrapper {
    height: auto;
    }
}
/* END VIDEO CSS */

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<head>
<script src="https://kit.fontawesome.com/a076d05399.js"></script>
</head>

<div id="videoWrapper">
<div class="watch-full-tag"><p><i class="fas fa-play-circle"></i> Watch In Full</p></div>
<video width="400" autoplay loop muted playsinline poster="https://element.vanst.one/wp-content/uploads/2020/06/Element_Video_Extract_001-scaled.jpg">
  <source src="https://element.vanst.one/wp-content/uploads/2020/06/ELEMENT-LTD-Vid_001_OPT.mp4" type="video/mp4">
  Your browser does not support HTML5 video.
</video>
</div>

If/else statement not working correctly with .html(); and font-awesome icons

1 Answers