How to Separate each Card from simultaneously flipping back

Highlighted
Regular Contributor

Hello I created the events card that rotates when you click/hover the card and rotates back when you click the arrow left icon at the back.  The action is okay but when I click on the next card the previous card is still rotating . I just need to separate the actions on each of the card, since when you click one card the action seems to follow on the other cards.

cardsarrowleft.gif

https://www.besocialscene.com/new-sept-homepage?hs_preview=YhTtsyAc-13258353405

 

This is the html structure of each of the  card, to distinguish each of the card I added an id=card1 id=card2 etc.

 <div class="card col">
          <input type="checkbox" id="card1" class="more" aria-hidden="true">  
            <div class="content">
                   
               <div class="front" style="background-image: url('https://cdn2.hubspot.net/hubfs/1943696/Tile%20Event%20Pictures/800px_chicago_skylin_N5DSy.jpg')">
                    <div class="inner">
                        <h2>Chicago Events</h2>
                        <div class="rating">
                            <i class="fa fa-star"></i>
                            <i class="fa fa-star"></i>
                            <i class="fa fa-star"></i>
                            <i class="fa fa-star"></i>
                            <i class="fa fa-star"></i>
                        </div>
                        <label for="card1" class="button" aria-hidden="true">
                          Discover
                        </label>
                    </div>
                </div>
               
                <div class="back">
                    <div class="inner">
                        <div class="info">
                        	 <!-- <i class="fa fa-calendar"></i> -->
                            <span>Month</span>
                            <div class="icon">
                               
                                
                            </div>
                        </div>
                        <div class="info">
                            <span>Event Type</span>
                            <div class="icon">
                                <!-- <i class="fa fa-door-open"></i> -->
                                
                            </div>
                        </div>
                        <div class="info">
                           <!--  <span>Event</span> -->
                            <div class="icon">
                               <!--  <i class="fa fa-bed"></i>
                                 -->
                            </div>
                        </div>
                       
                        <div class="description">
                            <ul>
                            <li class="btn draw-border"><a href="http://bit.ly/2ZQ6wAx" target="_blank"> <span>Sep</span> Fall Whiskey</a> </li>
                            <li class="btn draw-border"><a href="http://bit.ly/31mLarS" target="_blank"> <span>Oct</span> Halloween Bar Crawl Fri & Sat </a> </li>
                            <li  class="btn draw-border"><a href="http://bit.ly/2ZTCQlY" target="_blank"> <span>Dec</span> NYE Bar Crawl </a></li>
                            <li  class="btn draw-border"><a href="http://bit.ly/304aXI8" target="_blank"> <span>Dec</span> NYE Yacht </a></li>
                            <li class="btn draw-border"><a href="http://bit.ly/34IQl7G" target="_blank"> <span>Jan</span> Winter Whiskey </a></li>
                            <li class="btn draw-border"><a href="http://bit.ly/31kDGpc" target="_blank"> <span>Feb</span> Winter Tequila </a></li>
                            <li class="btn draw-border"><a href="http://bit.ly/2LMnlDk" target="_blank"> <span>Mar</span> St Patrick's Bar Crawl </a></li>
                            <li class="btn draw-border"><a href="http://bit.ly/2ZURHN6" target="_blank"> <span>Jun</span> Summer Whiskey </a></li>
                            <li class="btn draw-border"><a href="http://bit.ly/34zr4fY" target="_blank"> <span>Jul</span> Summer Tequila </a></li>
                            <li class="btn draw-border"><a href="http://bit.ly/2ZVuBpo" target="_blank"> <span>Aug</span> Air Show Yacht Party </a> </li>
                            </ul>

                        </div>
                        <div class="location">Chicago Events </div>
                        <div class="price">2019-2020</div>
                        <label for="card1" class="button return" aria-hidden="true">
                            <i class="fa fa-arrow-left"></i>
                        </label>
                    </div>
                </div>
             
            </div>
        </div> 

$(".return").click(function(e){
$(".card").addClass("myclass");
});
$(".return").mouseout(function(e){
$(".card").removeClass("myclass");
})

 

Reply
0 Upvotes

0 replies

No replies on this post just yet

No one has replied to this post quite yet. Check back soon to see if someone has a solution, or submit your own reply if you know how to help! Karma is real.

Reply to post

Need help replying? Check out our Community Guidelines