jQuery using .this correctly

Question

I have a page that has a number of weblog entries on it. Some of those entries have video associated with them. I would like to use jQuery Toggle the visibility of the videos (one at a time).

My question relates to the use of .this so that I only toggle the desired video.

My initial jQuery is:

<script type="text/javascript">
 $("#toggle").click(function()  {
 $("#video").toggle("slow");
 });
</script>

The content I am working with is (note I am working in Expression Engine here):

 <button id="toggle">Toggle</button>
 <div id="video">
  {exp:flvplugin playerpath="{site_url}video/player.swf" file="{seminar_video}" playernumber="{entry_id}" backcolor="c6c981" frontcolor="741a0a" width="500" height="325" }
  <div id="player{entry_id}"></div> 
 </div>

To start with I would like to hide all videos. Then I would like to show only the video associated with the particular entry.

Thanks.

Answer 1

You need to call the next method, like this:

$("#toggle").click(function() {
    $(this).next().toggle("slow");
});

This will only work if the toggle button is immediately before the video element.
If it isn't, you could try

$("#toggle").click(function() {
    $(this).nextAll('#video:first').toggle("slow");
});

To hide all of the videos, you can write $('#video').hide().

---

The best solution is to put each video along with its toggle button inside a separate element, and use classes, not IDs.

For example:

<div class="VideoContainer">
    <button class="toggle">Toggle</button>
    <div class="video">
        {exp:flvplugin playerpath="{site_url}video/player.swf" file="{seminar_video}" playernumber="{entry_id}" backcolor="c6c981" frontcolor="741a0a" width="500" height="325" }
    <div id="player{entry_id}"></div> 
</div>

You can then write

$("VideoContainer .toggle").click(function() {
    $(this).siblings('.video').toggle("slow");
});

Answer 2

If each video has a unique id you won't have to use $(this), just reference the correct id. For the videos to start out hidden set their css display: none;

Answer 3

This should work to hide all on click, then show the specific player (directly following the button in the DOM:

<script type="text/javascript">
 $("#toggle").click(function()  {
    $("div[id*='player']").hide(); /* hide all */
    $(this).next().toggle("slow"); /* show */
 });
</script>