My jQuery should be removing class but it isn't... thoughts?

Question

$(function activities() {

  // Shows info icon on hover //
  $(function hover() {
    $('.activity-img').hover(function() {
      $('.info-icon', this).stop().animate({'opacity': 0.7});
      $('h3', this).stop().animate({'color': 'white'});
    }, function() {
      $('.info-icon', this).stop().animate({'opacity': 0});
      $('h3', this).stop().animate({'color': 'black'});
    });
  });

  // reveals information on activity that is clicked //
  var activityId;
  var currentCopy;

  $(function activityImg() {
    $('.activity-img').on('click', function() {
      activityId = $(this).attr('data-activity');
      $('.activity-img').delay(500).fadeOut();
      $('#activity-copies').css('display', 'block');
      $('#' + activityId).addClass('open-copy').delay(1500).fadeIn();
    });
  });

  $(function activityCopy() {
    $('.close').on('click', function() {
      $('#' + activityId).removeClass('open-copy').fadeOut();
      $('.activity-copy').removeClass('open-copy');
      currentCopy.removeClass('open-copy');
      $('.activity-img').delay(500).fadeIn();
      $('#activity-copies').css('display', 'none');
    });
  });

  // allows navigation through activity info slides //

  $(document).ready(function navCopies()  {
    
    $('.arrow-next').click(function() {
      currentCopy = $('.open-copy');
      var nextCopy = currentCopy.next();

      if(nextCopy.length === 0) {
        nextCopy = $('.activity-copy').first();
      }
      
      currentCopy.hide().removeClass('open-copy');
      nextCopy.show().addClass('open-copy');

    });

    $('.arrow-prev').click(function() {
      var currentCopy = $('.open-copy');
      var prevCopy = currentCopy.prev();

      if(prevCopy.length === 0) {
        prevCopy = $('.activity-copy').last();
      }
      
      currentCopy.hide().removeClass('open-copy');
      prevCopy.show().addClass('open-copy');

    });

  });

/*\-------------- HOLIDAY IDEAS --------------\*/

#activities-page h1 {
    width: 360px;
}

#activities-page {
    background-color: #c1f4f3;
    padding-bottom: 100px;
}

#activities {
    width: 900px;
    height: 840px;
    margin: 0 auto;
    padding: 10px;
    text-align: center;
    background-color: #fefffa;
    position: relative;
}

.activity-img {
    width: 280px;
    height: 400px;
    margin: 10px;
    border: 1px single lightgrey;
    border-radius: 2px;
    float: left;
    position: relative;
    z-index: 0;
    background-color: transparent;
    cursor: pointer;
}

.activity-img h3 {
    width: 100%;
    text-align: center;
    position: relative;
    top: 0;
    z-index: 2;
    background-color: transparent;
}

.activity-copy {
    width: 920px;
    height: auto;
    border: 1px solid #e0e0e0;
    border-radius: 2px;
    position: absolute;
    background-color: #fefffa;
    top: 0;
    left: 0;
    display: none;
}

.activity-imgs-3 {
    width: 1500px;
    height: auto;
    padding: ;
    margin: ;
    overflow: hidden;
}

.activity-imgs-4 img {
    width: 500px;
}

.info-icon {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    opacity: 0;
    z-index: 1;
    border-radius: 5px;
}

#activities [data-activity = 'beaches'] {
    background-image: url('http://i1334.photobucket.com/albums/w648/rwestanton/beach_zpsec4dcc80.jpg');
    background-color: blue;
}
#activities [data-activity = 'bussana'] {
    background-image: url('http://i1334.photobucket.com/albums/w648/rwestanton/bussana_zpsb30c7bb1.jpg');
    background-position: left;
    background-size: cover;
    background-color: #abe0da;
}
#activities [data-activity = 'cycleway'] {
    background-image: url('http://i1334.photobucket.com/albums/w648/rwestanton/cycleway_zps39041c18.jpg');
    background-position: center;
    background-size: cover;
    background-color: #20D1AC;
}
#activities [data-activity = 'whalewatch'] {
    background-image: url('http://i1334.photobucket.com/albums/w648/rwestanton/whale_zpsacf8b16f.jpg');
    background-position: center;
    background-color: lightgreen;
}
#activities [data-activity = 'cervo'] {
    background-image: url('http://i1334.photobucket.com/albums/w648/rwestanton/cervo_zps345b3550.jpg');
    background-position: center;
    background-size: cover;
    background-color: lightgrey;
}
#activities [data-activity = 'la-mortola'] {
    background-image: url('http://i1334.photobucket.com/albums/w648/rwestanton/lamortola_zps47eee73a.png');
    background-position: center;
    background-size: cover;
    background-color: red;
}

.close {
    position: absolute;
    bottom: 20px;
    right: 20px;
    cursor: pointer;
}

.arrow-prev, .arrow-next {
    float: left;
    width: 40px;
    height: auto;
    position: relative;
    border-radius: 2px;
    cursor: pointer;
    background-color: #5956d0;
}

.arrow-next {
    float: right;
}

#activity-copies {
    width: 940px;
    height: 780px;
    position: absolute;
    left: -50px;
    top: 0;
    display: none;
}

.open-copy {
    display: block;
}

.activity-copy {
    width: 940px;
    height: 780px;
    padding: 40px;
    text-align: left;
    border-radius: 5px;
}

#activity-imgs-3 {
    width: 500px;
    height: 395px;
    float: left;
    overflow: hidden;
    margin-top: 30px;
    margin-right: 30px;
    margin-bottom: 20px;
    -webkit-box-shadow: 0 3px 5px 0 black;
    -moz-box-shadow: 0 3px 5px 0 black;
    -box-shadow: 0 3px 5px 0 black;
}

.activity-copy h2 {
    text-align: center;
}

.activity-copy p {
    margin-top: 50px;
    padding: 0;
}

#activity-imgs-3 .slides {
    width: 2080px;
    height: 395px;
    display: block;
}

#activity-imgs-3 .slides .slide {
    width: 500px;
    height: 395px;
    list-style-type: none;
    overflow: hidden;
    float: left;
}

#activity-imgs-3 .slides .slide img {
    width: 800px;
}


                
                    SANDY BEACH
                    
                
                
                    BUSSANA VECCHIA
                    
                
                
                    PISTA CICLOPEDONALE DELLA RIVIERA DEI FIORI
                    
                
                
                    WHALEWATCH IMPERIA
                     
                
                
                    DAY TRIP TO CERVO
                    
                
                
                    HANSBURY BOTANIC GARDENS
                     
                
                
                    
                        
                        
                        
                        Beaches
                        
                            
                                
                                
                                
                            
                        
                        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur imperdiet elementum lacus, quis dignissim turpis pretium id. Nam non enim at diam tincidunt porttitor non id enim. Nulla ut lorem nec velit egestas eleifend. Curabitur pretium, dolor nec sollicitudin tempus, lectus nulla fermentum est, ornare aliquam ex leo id sapien. Praesent malesuada tincidunt nunc sed sodales. Fusce ac hendrerit ante. Vivamus congue in diam egestas interdum. Aliquam lobortis magna quis hendrerit suscipit. Maecenas sagittis, diam a finibus pulvinar, odio urna placerat risus, ac vehicula quam velit sed sem. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Etiam quis augue lacus. Vivamus a finibus risus. Morbi sollicitudin eros id egestas commodo. Aenean vulputate, mi quis scelerisque lobortis, lacus eros malesuada massa, et dapibus purus est ac urna.
                    
                    
                        
                        
                        
                        Bussana Vecchia
                        
                            
                                
                                
                                
                            
                        
                        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur imperdiet elementum lacus, quis dignissim turpis pretium id. Nam non enim at diam tincidunt porttitor non id enim. Nulla ut lorem nec velit egestas eleifend. Curabitur pretium, dolor nec sollicitudin tempus, lectus nulla fermentum est, ornare aliquam ex leo id sapien. Praesent malesuada tincidunt nunc sed sodales. Fusce ac hendrerit ante. Vivamus congue in diam egestas interdum. Aliquam lobortis magna quis hendrerit suscipit. Maecenas sagittis, diam a finibus pulvinar, odio urna placerat risus, ac vehicula quam velit sed sem. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Etiam quis augue lacus. Vivamus a finibus risus. Morbi sollicitudin eros id egestas commodo. Aenean vulputate, mi quis scelerisque lobortis, lacus eros malesuada massa, et dapibus purus est ac urna.
                    
                    
                        
                        
                        
                        Pista ciclopedonale della Riviera dei Fiori
                        
                            
                                
                                
                                
                            
                        
                        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur imperdiet elementum lacus, quis dignissim turpis pretium id. Nam non enim at diam tincidunt porttitor non id enim. Nulla ut lorem nec velit egestas eleifend. Curabitur pretium, dolor nec sollicitudin tempus, lectus nulla fermentum est, ornare aliquam ex leo id sapien. Praesent malesuada tincidunt nunc sed sodales. Fusce ac hendrerit ante. Vivamus congue in diam egestas interdum. Aliquam lobortis magna quis hendrerit suscipit. Maecenas sagittis, diam a finibus pulvinar, odio urna placerat risus, ac vehicula quam velit sed sem. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Etiam quis augue lacus. Vivamus a finibus risus. Morbi sollicitudin eros id egestas commodo. Aenean vulputate, mi quis scelerisque lobortis, lacus eros malesuada massa, et dapibus purus est ac urna.
                    
                    
                        
                        
                        
                        Whalewatch Imperia
                        
                            
                                
                                
                                
                            
                        
                        The biologically teaming coastline of the Riviera means whale watching excursions are frequently made in the summer period. People of all ages enjoy this activity and it certainly makes for a quirky alternative to the aquarium. Whalewatch Imperia provide a regular boat service that picks up passengers from Sanremo, Imperia and Bordghera. Sitings of fin or sperm whales are successful for a great deal of the trips, but if there is no sighting during your trip, your ticket remains valid for another trip. Other creatures such as dolphins, rays and turtles are regularly spotted, and whatever happens you’re almost certain to spot something. There is generally a buzz of excitement on these trips and people are friendly. During the cruise out to sea your emotions melt away and there is little more relaxing than the feel of the cool wet air on a hot summer’s day.
                    
                    
                        
                        
                        
                        Day trip to Cervo
                        
                            
                                
                                
                                
                            
                        
                        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur imperdiet elementum lacus, quis dignissim turpis pretium id. Nam non enim at diam tincidunt porttitor non id enim. Nulla ut lorem nec velit egestas eleifend. Curabitur pretium, dolor nec sollicitudin tempus, lectus nulla fermentum est, ornare aliquam ex leo id sapien. Praesent malesuada tincidunt nunc sed sodales. Fusce ac hendrerit ante. Vivamus congue in diam egestas interdum. Aliquam lobortis magna quis hendrerit suscipit. Maecenas sagittis, diam a finibus pulvinar, odio urna placerat risus, ac vehicula quam velit sed sem. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Etiam quis augue lacus. Vivamus a finibus risus. Morbi sollicitudin eros id egestas commodo. Aenean vulputate, mi quis scelerisque lobortis, lacus eros malesuada massa, et dapibus purus est ac urna.
                    
                    
                        
                        
                        
                        Hansbury Botanic Garden
                        
                            
                                
                                
                                
                                
                            
                        
                        
                        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur imperdiet elementum lacus, quis dignissim turpis pretium id. Nam non enim at diam tincidunt porttitor non id enim. Nulla ut lorem nec velit egestas eleifend. Curabitur pretium, dolor nec sollicitudin tempus, lectus nulla fermentum est, ornare aliquam ex leo id sapien. Praesent malesuada tincidunt nunc sed sodales. Fusce ac hendrerit ante. Vivamus congue in diam egestas interdum. Aliquam lobortis magna quis hendrerit suscipit. Maecenas sagittis, diam a finibus pulvinar, odio urna placerat risus, ac vehicula quam velit sed sem. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Etiam quis augue lacus. Vivamus a finibus risus. Morbi sollicitudin eros id egestas commodo. Aenean vulputate, mi quis scelerisque lobortis, lacus eros malesuada massa, et dapibus purus est ac urna.

For my website I have created a section that is dedicated to holiday ideas, which has a set of cover-pictures and information on activities holidayers might like. It is interactive, essentially like a gallery, and should work like this: the user clicks on a cover-picture; all the cover-pictures disappear and an information box for the corresponding activity is displayed; the user can either flick through all the boxes with different activity information or close their current box; once closed they can click on another cover-picture and it should repeat the first action described. But at this stage, the user is shown the last information box that they closed, and it shows every time they click on an arrow until the user has navigated through the activities and passed that box. I am assigning an 'open-copy' class which allows the user to navigate and I think it is somehow still attached.

In case my description isn’t enough, it should act like this page where you click on a product and it shows info on that product and allows you to flick through information on each product (minus some animation): http://www.lesfleurs.ch/bouquets.php?lang=en&select_pays=110&monnaie=EUR

twain · Accepted Answer

You forgot in your close function to hide the element as well:

  $('.activity-copy').removeClass('open-copy').hide();

instead of

  $('.activity-copy').removeClass('open-copy');

Cause if you do not hide it as well, you will have on the next open click two elements with display: block. With the above code you hide all the elements on close and then you have just the right element with display:block.

Another thing:

currentCopy.removeClass('open-copy');

this line in your close function will fail if you open an info and close it without switching between the infos, cause currentCopy is undefined in that case.

Just do the following:

$('.open-copy').removeClass('open-copy');

This will remove all open-copy classes on close.

My jQuery should be removing class but it isn't... thoughts?

Answers (1)

Related Questions

My jQuery should be removing class but it isn&#39;t... thoughts?

Answers (1)

Related Questions

My jQuery should be removing class but it isn't... thoughts?