Flip a Div Over with a Link

Question

So, check this out: http://maplemountainchorus.org/mandy/index2.html

Click on the "View Song List" link and the album cover flips over to show what will be a list of songs for the album. The link's name changes to "View Album Art". Click the "View Album Art" link and the album flips over to show the front again. The link's name changes back to "View Song List".

Now, click the "View Song List" link again. I want it to flip the album over again, but it doesn't. Anyone know how I can fix this?

Also, the flip animations are showing on the other "hidden" albums in the div. Does anyone know how to fix that, also?

Here's my jQuery:

$(function(){

$(".flipPad a.viewSongList").bind("click",function(){
$(".flipbox").flip({
        direction: 'lr',
        color: '#fff',
        content: $(".flipbox").addClass("removeBkgrnd").html('<p>Here is  the song list.</p>'),
        onBefore: function(){$(".flipPad a.viewSongList").html('View Album Art').addClass("viewAlbumArt")},
        onEnd: function(){$(".flipPad a.viewSongList.viewAlbumArt").click(function(){
            $(".flipbox").removeClass("removeBkgrnd").html('');
            $(".flipPad a.viewSongList").removeClass("viewAlbumArt").html('View Song List');

        });
        }
    })
    return false;

});

Here's my HTML:

 <section id="media">
    <div id="buyMusic">
        <div id="musicSlider" class="flexslider" style="background-color:#000;">
              <ul class="slides">
                <li>
                  <div class="flipbox sweetDreams"></div>
                  <div class="flipPad">
                    <a href="#" class="viewSongList">View Song List</a>
                  </div>    
                </li>
                <li>
                  <div class="flipbox winterWonderland"></div>
                  <div class="flipPad">
                    <a href="#" class="viewSongList">View Song List</a>
                  </div>    
                </li>
                <li>
                  <div class="flipbox rightCry"></div>
                  <div class="flipPad">
                    <a href="#" class="viewSongList">View Song List</a>
                  </div>    
                </li>
                <li>
                  <div class="flipbox mandy"></div>
                  <div class="flipPad">
                    <a href="#" class="viewSongList">View Song List</a>
                  </div>    
                </li>
                <li>
                  <div class="flipbox platinum"></div>
                  <div class="flipPad">
                    <a href="#" class="viewSongList">View Song List</a>
                  </div>    
                </li>
                <li>
                  <div class="flipbox patsy"></div>
                  <div class="flipPad">
                    <a href="#" class="viewSongList">View Song List</a>
                  </div>    
                </li>
              </ul>
        </div>
        <div id="musicSliderNav" class="flexslider">
              <ul class="slides">
                <li>
                  <img src="images/music-sweet-dreams.jpg"/>
                </li>
                <li>
                 <img src="images/music-winter-wonderland.jpg"/>
                </li>
                <li>
                  <img src="images/music-right-cry.jpg"/>
                </li>
                <li>
                 <img src="images/music-mandy.jpg"/>
                </li>
                <li>
                  <img src="images/music-platinum.jpg"/>
                </li>
                <li>
                 <img src="images/music-patsy.jpg"/>
                </li>
              </ul>
        </div>
    </div>
  </section>

Answer 1

you need to fix a few bugs in the a.viewSongList click event handler.

Also, the flip animations are showing on the other "hidden" albums in the div.

Your selectors in main event handler covered more than your wanted. $(".flipbox"), for example, selects all elements in the document containing "flipbox" class, not only children ones for event caused element.

I want it to flip the album over again, but it doesn't

"content" param should be wrapped in function, in your case there is an array of jquery elements instead of function.

Looks like I really fail with English, sorry : >

Down here is working excample.

$('.flipPad a.viewSongList').attr('currentContent', 'art')
$('.flipPad a.viewSongList').click(function() {
    var that = this;
    var currentContent = $(that).attr('currentContent');
    var flipbox = $(that).parent().parent().find('.flipbox');
    var albumData = flipbox.find('.albumData');
    $(flipbox).flip({
        direction: 'lr',
        color: '#fff',
        content: function() {
            if(currentContent == 'art') {
                $(flipbox).addClass('removeBkgrnd');
                $(albumData).show();
            } else {
                $(flipbox).removeClass('removeBkgrnd');

            }                
        },
        onEnd: function() {
            if(currentContent == 'art') {
                $(that).addClass('viewAlbumArt').html('View Album Art');
                $(albumData).show();
                $(that).attr('currentContent', 'songList');
            } else {
                $(that).removeClass('viewAlbumArt').html('View Song List');
                $(albumData).hide();
                $(that).attr('currentContent', 'art');
            }
        }
    });
    return false;
});