0

Hi I can't get my toggle button to work so once again I'm here hoping for some good soul to help me. Below is my jQuery code. I have 2 css clasess 1st is play with a referenace to jpg play and the 2nd one has reference to pause.jpg. All i want is simply to toggle between the two.

html

<span id="play"></span>

css

#play
{
	width:100px;
	height:60px;
	background-image: url(../images/play.jpg);
	float:left;
}
#pause
{
	width:100px;
	height:60px;
	background-image: url(../images/pause.jpg);
	float:left;
}

jQuery

$(document).ready(function(){
    $('#play').click(function(){
							 
        $(this).toggleClass("#pause");
    });
});
3
Contributors
5
Replies
12
Views
7 Years
Discussion Span
Last Post by amko
1

1. The reason I use div's is because span's often give me trouble.
2. toggleClass toggles a specific class on and off, so you can't use it like you do now
3. I gave my div the id #toggle, so I could bind the click to.
4. In the click event I check the class of the toggle div, and set the other one.
5. Since I'm changing the classes now, I had to replace the # in the CSS with a dot.

<html>
  <head>
    <script type="text/javascript" src="../jquery-1.3.2.min.js"></script>
    <style>
      .play {
        width:100px;
        height:60px;
        background-image: url(play.png);
        float:left;
      }
      .pause {
        width:100px;
        height:60px;
        background-image: url(pause.png);
        float:left;
      }
    </style>
  </head>
  <body>
    <div id="toggle" class="play"></div>
    <script type="text/javascript">
      $(document).ready(function() {
        $('#toggle').bind("click", function() {
          if ($(this).attr("class") == "play")
             $(this).attr("class", "pause");
          else
             $(this).attr("class", "play");
        });
      });
    </script>
  </body>
</html>
Votes + Comments
Great helper! Very dedicated person!A+++++
0

1. The reason I use div's is because span's often give me trouble.
2. toggleClass toggles a specific class on and off, so you can't use it like you do now
3. I gave my div the id #toggle, so I could bind the click to.
4. In the click event I check the class of the toggle div, and set the other one.
5. Since I'm changing the classes now, I had to replace the # in the CSS with a dot.

<html>
  <head>
    <script type="text/javascript" src="../jquery-1.3.2.min.js"></script>
    <style>
      .play {
        width:100px;
        height:60px;
        background-image: url(play.png);
        float:left;
      }
      .pause {
        width:100px;
        height:60px;
        background-image: url(pause.png);
        float:left;
      }
    </style>
  </head>
  <body>
    <div id="toggle" class="play"></div>
    <script type="text/javascript">
      $(document).ready(function() {
        $('#toggle').bind("click", function() {
          if ($(this).attr("class") == "play")
             $(this).attr("class", "pause");
          else
             $(this).attr("class", "play");
        });
      });
    </script>
  </body>
</html>

Thank you very much for your post!!! Very informative and straight to the point! I admire your dedication helping others like you do! Superb!!!!

0

Thanks. I had a lot of help too while learning jQuery. Glad to return the favour.

If it solved your problem, would you please mark this thread solved.

0

Thanks. I had a lot of help too while learning jQuery. Glad to return the favour.

If it solved your problem, would you please mark this thread solved.

done!

0

This was a great solution, but is there a way to add a "play" and "pause" function to this script?

This question has already been answered. Start a new discussion instead.
Have something to contribute to this discussion? Please be thoughtful, detailed and courteous, and be sure to adhere to our posting rules.