multiple instances of flip div with associated toggle visibility

Question

I have a very simple script that flips a div onclick:

jQuery(document).ready(function(){
    jQuery('a.flip').click(function(event){
        jQuery('.passbook').toggleClass('rotate-3d');
        event.preventDefault();
    });
});

The problem I am encountering is that on the page, there are 20 divs with the same flip effect.

I need to modify this so that each div flips independently.

Also, when a div flips, it toggles the visibility of another div. Currently, that toggle visibility is handled by an onclick event in the html, which is not an elegant solution, so I need to move that onclick event into the toggle script.

The toggle script is::

function toggle_visibility(id) {
    var e = document.getElementById(id);
    if(e.style.display == 'block')
        e.style.display = 'none';
    else
        e.style.display = 'block';
}

This is for a CD music player and shopping cart.

What I would like to do is combine these two separate scripts into one, in jQuery noconflict, such that each div will flip independently from the other, each flip will toggle the visibility of a div with "more info" about the CD that was clicked on/flipped, and that the toggle event is not handled by an onclick event in the HTML.

Here is the HTML:

<div id="row1">
    <div class="cover-art">
        <section class="passbook">
            <div class="card front">
                <img src="front1.jpg" width="180px" height="180px">
                <a href="#" class="info flip" onclick="toggle_visibility('cd01');">i</a>
            </div>
            <div class="card back">
                <img src="back1.jpg" width="180px" height="180px">
                <a href="#" class="close flip" onclick="toggle_visibility('cd01');">x</a>
            </div>
        </section>
        <div class="cd-name">
            <h6 class="truncate uppercase">2 concerto de Mozart et Beethoven</h6>
        </div>
    </div>
    <div class="cover-art">
        <section class="passbook">
            <div class="card front">
                <img src="front2.jpg" width="180px" height="180px">
                <a href="#" class="info flip" onclick="toggle_visibility('cd02');">i</a>
            </div>
            <div class="card back">
                <img src="back2.jpg" width="180px" height="180px">
                <a href="#" class="close flip" onclick="toggle_visibility('cd02');">x</a>
            </div>
        </section>
        <div class="cd-name">
            <h6 class="truncate uppercase">Johann Sebastien Bach - L’Art de la Fugue</h6>
        </div>
    </div>
    <div class="cover-art">
        <section class="passbook">
            <div class="card front">
                <img src="front3.jpg" width="180px" height="180px">
                <a href="#" class="info flip" onclick="toggle_visibility('cd03');">i</a>
            </div>
            <div class="card back">
                <img src="back3.jpg" width="180px" height="180px">
                <a href="#" class="close flip" onclick="toggle_visibility('cd03');">x</a>
            </div>
        </section>
        <div class="cd-name">
            <h6 class="truncate uppercase">Les Béatitudes - Paroles et Musique</h6>
        </div>
    </div>
</div>
<div class="clear"></div>
<div id="cd01" class="cd-details">
    <h6 class="uppercase white">2 concerto de Mozart et Beethoven</h6>
    <img class="largeart" src="front1-lg.jpg" width="230px" height="230px" align="right">
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec ullamcorper nulla non metus auctor fringilla.</p>
</div>
<div class="clear"></div>
<div id="cd02" class="cd-details">
    <h6 class="uppercase white">Johann Sebastien Bach - L’Art de la Fugue</h6>
    <img class="largeart" src="front2-lg.jpg" width="230px" height="230px" align="right">
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec ullamcorper nulla non metus auctor fringilla.</p>
</div>
<div class="clear"></div>
<div id="cd03" class="cd-details">
    <h6 class="uppercase white">Les Béatitudes - Paroles et Musique</h6>
    <img class="largeart" src="front3-lg.jpg" width="230px" height="230px" align="right">
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec ullamcorper nulla non metus auctor fringilla.</p>
</div>
<div class="clear"></div>

And here is the CSS:

.cover-art {
    display: inline-block;
}
.cd-name {
    width: 180px;
}
.cd-details {
    display: none;
    background-color: @resonnanceGreen;
    color: @white;
    padding: 10px 0 10px 10px;
    margin-bottom: 20px;
    overflow: hidden;
}
.largeart {
    padding-left: 15px !important;
    margin-right: -50px;
}
.truncate {
    width: 180px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.passbook {
    position: relative;
    width: 180px;
    height: 180px;
    -webkit-transform-style: preserve-3d;
    -moz-transform-style: preserve-3d;
    transform-style: preserve-3d;
    -webkit-transition: 0.5s;
    -moz-transition: 0.5s;
    transition: 0.5s;
    display: inline-block;
}
.card {
    position: absolute;
    -webkit-backface-visibility: hidden;
    -moz-backface-visibility: hidden;
    backface-visibility: hidden;
}
.front {
    z-index: 1;
    .info {
        width: 18px;
        height: 18px;
        border-radius: 21px;
        font-family: @menuFontFamily;
        font-style: italic;
        font-weight: 700;
        background-color: @white;
        color: @resonnanceGreen;
        text-align: center;
        position: absolute;
        right: 10px;
        bottom: 15px;
        font-size: 11px;
        line-height: 18px;
        display: block;
        text-decoration: none;
        border: 1px solid @resonnanceGreen;
    }
}
.back {
    -webkit-transform: rotateY(180deg);
    -moz-transform: rotateY(180deg);
    transform: rotateY(180deg);
    .nav {
        padding: 0;
        margin: 0;
        color: #fff;
        font-size: 12px;
        width: 100%;
        font-weight: bold;
    }
    .close {
        width: 18px;
        height: 18px;
        border-radius: 21px;
        font-family: @menuFontFamily;
        font-style: italic;
        font-weight: 700;
        background-color: @white;
        color: @resonnanceGreen;
        text-align: center;
        position: absolute;
        right: 10px;
        bottom: 15px;
        font-size: 11px;
        line-height: 18px;
        display: block;
        text-decoration: none;
        border: 1px solid @resonnanceGreen;
    }
}
.button {
    &.done {
        right: 10px;
    }
}
.rotate-3d {
    -webkit-transform: rotateY(180deg);
    -moz-transform: rotateY(180deg);
    transform: rotateY(180deg);
}

You can see the results here: http://resdemo.ergonomiq.net/en/shop

Can someone help me make the needed changes to achieve:

1. Merge the two scripts into one in jQuery noconflict mode
2. Have each div flip independently.
3. Move the onclick="toggle_visibility('cd01'); event handler out of the html and have the trigger be in the javascript

Answer 1

1) You can skip your toggleVisibility function and instead use:

$('#cd01').toggle();

2) To just get just the parent .passbook of the clicked tag, use:

$(this).closest('.passbook');

3) Add an arbitrary data attribute to the parent .passbook and use that to target the div:

<section class="passbook" data-visibility="cd01">
...
</section>

I've summed it all up in a fiddle: http://jsfiddle.net/4PPQg/7/