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
1 Reply 1
Highlighted
Community Manager

Hey @chrissa0000 

 

I apologize for the delay in getting back to you. I am wondering if you were able to resolve this or if you still need assistance on this matter?   

 

Thank you

Sharon


Did my post help answer your query? Help the Community by marking it as a solution
Reply
0 Upvotes