Toggle switch for html5 audio

Question

I have tried in vain for a week now to get a toggle button on my playlist. It is made on a webpage with the html5 tag and standard controls.

If I click on the .pl button, the playlist shows up, but clicking it again does not hide it.

I am pretty certain I can find some script to get it to work, but am looking for an elegant solution using the existing code and css. Alternatively I might introduce a new button in the playlist itself which would vanish it.

Here is what exists (I added .nopl by editing the sprite): css

.pl {background: transparent url("../../images/spr.png") no-repeat scroll -274px -175px;
cursor: pointer;
height: 34px;
    margin-left:85%;
position: absolute;
top: 20px;
width: 10%;
    }
    .pl:hover {top: 21px;}
    .playlist li {color: #EEEEEE;cursor: pointer;margin: 0 0 0 -25%;font-size:10px;}
    .playlist li.active {font-weight: bold;}
    .nopl {
    background: transparent url("../../images/spr.png") no-repeat scroll -227px -174px;
    cursor: pointer;
    height: 34px;
        margin-left:85%;
    position: absolute;
    top: 20px;
    width: 10%;
    }

My html:

      <div class="content">
      <h1>Listen to past shows... </h1>
      <div class="player">
      <div class="pl"></div>
      <div class="title"></div>
      <div class="artist"></div>
      <div class="cover"></div>
      <div class="controls">
          <div class="play"></div>
          <div class="pause"></div>
          <div class="rew"></div>
          <div class="fwd"></div>
      </div>
      <div class="volume"></div>
      <div class="tracker"></div>
      </div>
      <ul class="playlist hidden">
      <li audiourl="./abc.mp3" cover="cover1.jpg" artist="abc">Date New Years</li>
      </ul>

Existing main.js:

    // show playlist
    $('.pl').click(function (e) {
        e.preventDefault();
    $('.playlist').fadeIn(300);
    });

What I have tried in main.js:

        function plAudio() {
         $('.pl').click(function (e) {
                e.preventDefault();
             $('.playlist').fadeIn(300);
             $('.pl').addClass('hidden');
             $('.nopl').addClass('visible');
        );}
        function noplAudio() {
         $('.nopl').click(function (e) {
                e.preventDefault();
             $('.playlist').fadeOut(300);
             $('.pl').removeClass('hidden');
             $('.nopl').removeClass('visible');
    });}

So the idea is to just toggle visibility of the buttons and the playlist. But this doesn't allow playlist to show up at all.

I also tried in main.js:

    // show playlist
    $('.pl').click(function (e) {
        e.preventDefault();
    $('.playlist').fadeIn(300);
    hid=0;
    });
    // hide playlist
    if (hid=0) {
            $('.pl').click(function (e) {
                 e.preventDefault();
    $('.playlist').fadeOut(300);
            hid=1;
    })};

This toggles the playlist on and off after one click and I think I see why. Any suggestions?

Answer 1

Try this fiddle http://jsfiddle.net/s3NKd/1/

You I have added an HTML content to the '.pl' div.

   <div class="pl">Show play list</div>

After this I changed the font color of the playlist li's to #130606

And then added style=display:none to the playlist ul to hide it in first run.

Used this simple js

      $('.pl').click(function (e) {
         e.preventDefault();
         $('.playlist').fadeToggle(300);
      });