jQuery hide and show with specified div element

[chozotheqhai]

Suppose I had 3 divs, each div has at least one hide/show button. The problem is when I click a show button, both 3 divs will show ups.

Example:

<div id="container">
        <div class="course">
            <a href="#" class="clickshow"> Click me to Show</a>
            <div class="hidden">
            Hello
            </div>
        </div>
        <div class="course">
            <a href="#" class="clickshow"> Click me to Show</a>
            <div class="hidden">
            Hello
            </div>
        </div>
        <div class="course">
            <a href="#" class="clickshow"> Click me to Show</a>
            <div class="hidden">
            Hello
            </div>
        </div>
    </div>

    <script>
    $(document).ready(function(){
                $(".course a.clickshow").click(function(){
                    $(".course div.hidden").show();
                })
    });
    </script>

When I click show button, it shows up all.
Then, I tried to change every div into differrent course id. It end up...

   <div id="container">
        <div class="course-1">
            <a href="#" class="clickshow"> Click me to Show</a>
            <div class="hidden">
            Hello
            </div>
        </div>
        <div class="course-2">
            <a href="#" class="clickshow"> Click me to Show</a>
            <div class="hidden">
            Hello
            </div>
        </div>
        <div class="course-3">
            <a href="#" class="clickshow"> Click me to Show</a>
            <div class="hidden">
            Hello
            </div>
        </div>
    </div>

    <script>
    $(document).ready(function(){
                $(".course-1 a.clickshow").click(function(){
                    $(".course-1 div.hidden").show();
                })
                $(".course-2 a.clickshow").click(function(){
                    $(".course-2 div.hidden").show();
                })
                $(".course-3 a.clickshow").click(function(){
                    $(".course-3 div.hidden").show();
                })
    });
    </script>

This will works very well, each show button will show it's own div.
However,if I have 100 courses in a page, my codes will be longer than ever.
How can I make it works with SHORTEST code ?
Thanks You.

[pritaeas]

This should work (off the top of my head):

$(".course a.clickshow").click(function(){
    $(this).next("div").toggleClass("hidden");
})

[iamthwee]

You could also do a loop. Seeing as it is only the number that changes

for ( $i = 0; $i < 100; $++)
{
  var tmp = ".course-" + $i;
  $(tmp).click(function()
  {
    //do stuff
  });

}

Code may have a few syntax issues but you get the point I hope.

[JorgeM]

Use the first sample code you have above and assign each div a class of "course". Then use the sample code pritaes provided. That code will work.

When you click on a div, only the div within that div will be displayed and then hidden again on each click.

<style>
  .hidden {display:none;}
</style>

<div id="container">
   <div class="course">
       <a href="#" class="clickshow"> Click me to Show</a>
         <div class="hidden">Hello</div>
   </div>
</div>

<script>
$(document).ready(function(){
     $(".course a.clickshow").click(function(){
          $(this).next("div").toggleClass("hidden");
     })
});
</script>