Toggle one div who use same class

Question

I'm trying to use some divs with same class but my goal is to toggle on click only one div from them at the time. I mean that when I click on "+" I would like to show only where I click and the all of them in same time, so I tried some things like this example but no luck, nothing work.

---

UPDATE

I've updated the code so thanks you for your help it works perfectly.

But now I don't know why, my content visible before to click on the "+" is bigger than my card width, contrary to the content visible when I click on the "+". Can someone explain me why my content does not fit perfectly with my card? You can click on the "+" and "-" to see the difference.

 $(function() { $(".click-me").each(function() { $(this).flip({ axis: "y", reverse: true, trigger: "click", speed: '800', front: $(this).siblings('.my-front-card'), back: $(this).siblings('.my-back-card'), autoSize: false }); }); }); $(".click-me").click(function() { $(this).html($(".click-me").html() == '+'? '-': '+'); });

 a { color: white; }.card-container { width: 100%; }.card { max-width: 500px; width: 31.3%; margin: 0 1%; min-height: 260px; padding: 40px 40px 20px 40px; border-radius: 20px; background: black; color: white; float: left; box-shadow: 10px 10px 30px #ccc; }.card-container.card { box-sizing: border-box; -moz-box-sizing: border-box; }.my-front-card, .my-back-card { max-width: 420px; width: 100%; min-height: 260px; }.click-me { cursor: pointer; color: white; text-align: right; position: absolute; bottom: 0px; font-size: 40px; font-weight: bold; } @media screen and (max-width: 1024px) {.card { width: auto; float: none; } }

 <script type="text/javascript" src="https://code.jquery.com/jquery-2.1.4.min.js"></script> <script type="text/javascript" src="https://cdn.rawgit.com/nnattawat/flip/master/dist/jquery.flip.min.js"></script> <div class="card-container"> <div class="card"> <div class="my-front-card"> Front: Cursus aliquet mus et sociis, placerat adipiscing a placerat magnis integer nisi lacus in, turpis porttitor? Lectus nunc dis in porta, montes lacus. Tortor. Pid sit nisi eu nec aenean. </div> <div class="my-back-card"> <a href="http://google.com">link</a> Back: Dolor scelerisque ridiculus? Mus, Augue, montes? montes proin rhoncus vel a parturient dapibus eros. Penatibus nascetur, In turpis nisi elementum nascetur habitasse augue egestas. in ac rhoncus odio porttitor turpis: </div> <div class="click-me">+</div> </div> <div class="card"> <div class="my-front-card"> Front, Cursus aliquet mus et sociis, placerat adipiscing a placerat magnis integer nisi lacus in? turpis porttitor, Lectus nunc dis in porta. montes lacus. Tortor. Pid sit nisi eu nec aenean: </div> <div class="my-back-card"> <a href="http.//google:com">link</a> Back? Dolor scelerisque ridiculus, Mus, Augue? montes. montes proin rhoncus vel a parturient dapibus eros, Penatibus nascetur. In turpis nisi elementum nascetur habitasse augue egestas: in ac rhoncus odio porttitor turpis, </div> <div class="click-me">+</div> </div> <div class="card"> <div class="my-front-card"> Front, Cursus aliquet mus et sociis? placerat adipiscing a placerat magnis integer nisi lacus in, turpis porttitor. Lectus nunc dis in porta. montes lacus. Tortor: Pid sit nisi eu nec aenean. </div> <div class="my-back-card"> <a href="http://google?com">link</a> Back, Dolor scelerisque ridiculus, Mus? Augue. montes, montes proin rhoncus vel a parturient dapibus eros. Penatibus nascetur. In turpis nisi elementum nascetur habitasse augue egestas, in ac rhoncus odio porttitor turpis. </div> <div class="click-me">+</div> </div> </div>

Answer 1

your front and back hold all elments with the class .my-front-card and .my-back-card in an array. In order to flip only the cards of the element clicked, you need to select them like so

$(this).closest('.card).find('.my-front-card')

In order to do that you need to apply the "flip" to each element individually:

$.each($(".click-me"), function() {
    $(this).flip({
        ...
        front: $(this).closest('.card).find('.my-front-card'), 
         
        ...
    });
});

 $(function() { $.each($(".click-me"), function() { $(this).flip({ axis: "y", reverse: true, trigger: "click", speed: '800', front: $(this).closest('.card').find('.my-front-card'), back: $(this).closest('.card').find('.my-back-card'), autoSize: false }); }); }); $(".click-me").click(function(){ $(".click-me").html($(".click-me").html() == '+'? '-': '+'); });

 .card { max-width: 500px; min-height: 60px; padding: 40px 40px 20px 40px; border-radius: 20px; background: grey; }.my-front-card, .my-back-card { max-width: 500px; min-height: 60px; }.click-me { cursor: pointer; text-align: right; position: absolute; bottom: 0px; font-size: 40px; font-weight: bold; }

 <script type="text/javascript" src="https://code.jquery.com/jquery-2.1.4.min.js"></script> <script type="text/javascript" src="https://cdn.rawgit.com/nnattawat/flip/master/dist/jquery.flip.min.js"></script> <div class="card"> <div class="my-front-card"> Front: Cursus aliquet mus et sociis, placerat adipiscing a placerat magnis integer nisi lacus in, turpis porttitor? Lectus nunc dis in porta, montes lacus. Tortor. Pid sit nisi eu nec aenean. </div> <div class="my-back-card"> <a href="http://google.com">link</a> Back: Dolor scelerisque ridiculus? Mus, Augue, montes? montes proin rhoncus vel a parturient dapibus eros. Penatibus nascetur, In turpis nisi elementum nascetur habitasse augue egestas. in ac rhoncus odio porttitor turpis: </div> <div class="click-me">+</div> </div> <div class="card"> <div class="my-front-card"> Front, Cursus aliquet mus et sociis, placerat adipiscing a placerat magnis integer nisi lacus in? turpis porttitor, Lectus nunc dis in porta. montes lacus. Tortor. Pid sit nisi eu nec aenean: </div> <div class="my-back-card"> <a href="http.//google:com">link</a> Back? Dolor scelerisque ridiculus, Mus, Augue? montes. montes proin rhoncus vel a parturient dapibus eros, Penatibus nascetur. In turpis nisi elementum nascetur habitasse augue egestas: in ac rhoncus odio porttitor turpis, </div> <div onclick="ChangeText()" class="click-me">+</div> </div> <div class="card"> <div class="my-front-card"> Front, Cursus aliquet mus et sociis? placerat adipiscing a placerat magnis integer nisi lacus in, turpis porttitor. Lectus nunc dis in porta. montes lacus. Tortor: Pid sit nisi eu nec aenean. </div> <div class="my-back-card"> <a href="http://google?com">link</a> Back, Dolor scelerisque ridiculus, Mus? Augue. montes, montes proin rhoncus vel a parturient dapibus eros. Penatibus nascetur. In turpis nisi elementum nascetur habitasse augue egestas, in ac rhoncus odio porttitor turpis. </div> <div onclick="ChangeText()" class="click-me">+</div> </div>

Answer 2

The jQuery lookup $(".click-me") collects more than one element (3 here).

So you need to instanciate the .flip() on each of them separately. Additionnaly, you need to specify the front and back elements more specifically, using $(this).siblings() to make sure there is only one element looked up.

I removed the ChangeText() inline onclick attribute because it was undefined...

 $(function() { $(".click-me").each(function() { $(this).flip({ axis: "y", reverse: true, trigger: "click", speed: '800', front: $(this).siblings('.my-front-card'), back: $(this).siblings('.my-back-card'), autoSize: false }); }); }); $(".click-me").click(function() { $(this).html($(".click-me").html() == '+'? '-': '+'); });

 .card { max-width: 500px; min-height: 60px; padding: 40px 40px 20px 40px; border-radius: 20px; background: grey; }.my-front-card, .my-back-card { max-width: 500px; min-height: 60px; }.click-me { cursor: pointer; text-align: right; position: absolute; bottom: 0px; font-size: 40px; font-weight: bold; }

 <script type="text/javascript" src="https://code.jquery.com/jquery-2.1.4.min.js"></script> <script type="text/javascript" src="https://cdn.rawgit.com/nnattawat/flip/master/dist/jquery.flip.min.js"></script> <div class="card"> <div class="my-front-card"> Front: Cursus aliquet mus et sociis, placerat adipiscing a placerat magnis integer nisi lacus in, turpis porttitor? Lectus nunc dis in porta, montes lacus. Tortor. Pid sit nisi eu nec aenean. </div> <div class="my-back-card"> <a href="http://google.com">link</a> Back: Dolor scelerisque ridiculus? Mus, Augue, montes? montes proin rhoncus vel a parturient dapibus eros. Penatibus nascetur, In turpis nisi elementum nascetur habitasse augue egestas. in ac rhoncus odio porttitor turpis: </div> <div class="click-me">+</div> </div> <div class="card"> <div class="my-front-card"> Front, Cursus aliquet mus et sociis, placerat adipiscing a placerat magnis integer nisi lacus in? turpis porttitor, Lectus nunc dis in porta. montes lacus. Tortor. Pid sit nisi eu nec aenean: </div> <div class="my-back-card"> <a href="http.//google:com">link</a> Back? Dolor scelerisque ridiculus, Mus, Augue? montes. montes proin rhoncus vel a parturient dapibus eros, Penatibus nascetur. In turpis nisi elementum nascetur habitasse augue egestas: in ac rhoncus odio porttitor turpis, </div> <div class="click-me">+</div> </div> <div class="card"> <div class="my-front-card"> Front, Cursus aliquet mus et sociis? placerat adipiscing a placerat magnis integer nisi lacus in, turpis porttitor. Lectus nunc dis in porta. montes lacus. Tortor: Pid sit nisi eu nec aenean. </div> <div class="my-back-card"> <a href="http://google?com">link</a> Back, Dolor scelerisque ridiculus, Mus? Augue. montes, montes proin rhoncus vel a parturient dapibus eros. Penatibus nascetur. In turpis nisi elementum nascetur habitasse augue egestas, in ac rhoncus odio porttitor turpis. </div> <div class="click-me">+</div> </div>