CODEWITHSUNDEEP
javascriptjqueryhtml
Nicholas Adamou
Nicholas Adamou

Reputation: 741

How do I make a link remove a class from a div using jQuery?

Edit: I fixed my problem, apparently jQuery 2.1.4.js wasn't found. #stupidmistakesthatyouoverlook thanks to all who responded and helped! It was very useful!

The Problem

I want a link to remove a class from a div so that it will show the contents and fade-in or out depending on the situation; however, my code (shown below) isn't accomplishing that task and I don't know why? Any Ideas?

My Code

Assume that I have an index.html that includes nav.jade and about.jade. For reference, I am using Jekyll.

(nav.jade)

section.nav 
ul#navList
    li
        a(href="#")#video-link
            i.fa.fa-youtube-play
            |  Music Video

(about.jade)

.video-overlay.hide
  .video-container 
     <iframe width="853" height="480" src="https://www.youtube.com/embed/EN5xqCNbf9c" frameborder="0" allowfullscreen></iframe>

     a(href="#").hide-cta Close this Video

(about.sass)

.video-overlay
  display: flex
  justify-content: center
  align-items: center

  position: fixed
  left: 0
  right: 0
  top: 0
  bottom: 0
  background-color: rgba(0, 0, 0, 0.5)
  z-index: 50

.video-container
  width: 853px
  height: 480px
  background-color: black
  padding: 5px

.hide-cta
  position: absolute
  top: 80%
  left: calc(50% - 85px)
  text-align: center
  text-decoration: none
  padding: 5px 10px
  color: white
  border: 2px solid white
  transition: all 0.3s ease-in-out

  margin-top: 30px

  &:hover
     color: black
     background: white
     border: 2px solid white

.hide
   display: none

(functions.js) 

$(function() {//shorthand for $('document').ready(function () {}

       $('#video-link').on('click', function() { //check if link was clicked
            $('.video-overlay').removeClass('.hide'); //unhide the div
            $('.video-overlay').fadeIn('slow'); //fade the div in
            return false; //if it wasn't clicked return false
       });

       $('#hide-cta').on('click', function() { //check if link was clicked
            $('.video-overlay').addClass('.hide'); //make the div hide itself
            $('.video-overlay').fadeOut('slow'); //fade the div out
            return false; //if it wasn't clicked return false 
       });
});

Upvotes: 1

Views: 53

Answers (1)

Travis J
Travis J

Reputation: 82277

This is a common syntax error that many people stumble into. I have been guilty of it in the past as well. Do not user selectors in the addClass and removeClass function calls. Just use the class name.

So the calls should look like

$('.video-overlay').removeClass('hide'); //unhide the div

and

$('.video-overlay').addClass('hide'); //make the div hide itself

respectively.

Upvotes: 2

Related Questions