Home/ Questions/Q 3800928
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-19T13:58:10+00:00

I’ve got a page with a repeater and a bunch of documents that should

  • 0

I’ve got a page with a repeater and a bunch of documents that should be hidden to start and then shown with a plus sign next to each.

My question is – do I have to assign unique ID to each document DIV to make it be able to toggle hidden and shown?

What’s the most code-efficient way to handle this?

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    Here is a quick example:

    http://jsfiddle.net/aaamU/

    HTML

    <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html>
  <head>
    <title></title>
  </head>
  <body>
    <div id="repeater">
      <div class="document">
        <div class="title">Document 1</div>
          <div class="button"><a href="#">+</a></div>
      </div>
      <div class="document">
        <div class="title">Document 2</div>
        <div class="button"><a href="#">+</a></div>
      </div>
      <div class="document">
        <div class="title">Document 3</div>
        <div class="button"><a href="#">+</a></div>
      </div>
    </div>
  </body>
</html>

    CSS

    #repeater .document
{
    height: 20px;
    border: 1px solid black;
    width: 200px;
    padding: 10px;
}
.document .title
{
    float:left;
}
.document .button
{
    float:right;
}

    JS

    $(document).ready(function(){
    $(".title").hide();
    $(".button a").click(function(event){
        $(this).parents(".document").children(".title").toggle();
        event.preventDefault;
    });
});

    Here is a Fork with the sliding version:

    http://jsfiddle.net/W5QkY/1/

    • 0