Show/Hide Certain Div with JQuery on Button Click

Question

I am trying to hide/show/toggle a div when a button is clicked. I am using ASP.NET and everything is inside an ASP:Datalist.

I can show or hide the div correctly. However it opens all the divs instead of just the one where the button was selected. The div is am trying to show/hide is .content

How can I open only the div that the button belongs?

JSFiddle - here's an example of the problem http://jsfiddle.net/kMEre/

The script:

<script type="text/javascript">
    jQuery(document).ready(function () {
        jQuery(".content").hide();
    });
</script>
<script type="text/javascript">
    jQuery(document).ready(function () {
        jQuery('#man').live('click', function (event) {
           jQuery('.content').toggle('show');
        });
    });
</script>

The datalist (ASP.NET)

<asp:DataList runat="server" id="dgQuestionnaire" DataKeyField="QuestionID" >
    <ItemTemplate>
        <div class="question_box">
            <p class="small_bold">Question <asp:Label ID="lblOrder" runat="server" Text='<%# Container.ItemIndex  + 1 %>'></asp:Label></p>
            <div class="Questions">
               <div class="heading">
                   <asp:HiddenField ID="hiddenQuestionID" runat="server" Value='<%# Eval("QuestionID") %>' />
                   <asp:TextBox runat="server" ID="tbQuestionName" Text='<%# Eval("QuestionText") %>' CssClass="form" Width="300px"></asp:TextBox>
                   <input type='button' id='man' value='hide/show'>
               </div> <!-- end heading -->
               <div class="content">
                  <p class="small_bold new">Question Type</p>
                  <asp:DropDownList runat="server"  ID="QuestnType" CssClass="question_dropdown">
                  <asp:ListItem Value="1">Check Boxes (Multiple Choice)</asp:ListItem>
                  <asp:ListItem Value="2">Drop Down</asp:ListItem>
                  <asp:ListItem Value="3">Open Ended</asp:ListItem>
                  <asp:ListItem Value="4">Radio Buttons (Single Choice)</asp:ListItem>
                  <asp:ListItem Value="5">Range (Percentage)</asp:ListItem>
                  </asp:DropDownList>
                  <asp:DataList ID="nestedDataList" runat="server">
                     <ItemTemplate>
                         <p class="new">Answer <asp:Label ID="lblAnswerOrder" runat="server" Text='<%# Container.ItemIndex  + 1 %>'></asp:Label></p>
                         <asp:HiddenField ID="hiddenAnswerID" runat="server" Value='<%# Eval("AnswerID") %>' />
                         <asp:TextBox ID="TextBox1" runat="server" CssClass="form" Text='<%# Eval("AnswerID") %>' Width="300px"></asp:TextBox>
                         <asp:TextBox ID="tbAnswerText" runat="server" CssClass="form" Text='<%# Eval("AnswerTitle") %>' Width="300px"></asp:TextBox>
                     </ItemTemplate>
                 </asp:DataList>
                 <asp:Button runat="server" ID="updateName" CssClass="button_update" style="border: 0px;" onClick="UpdateQuestionName_Click" />
                 <asp:Button runat="server" ID="btnDelete" Text="Delete" OnClientClick="return confirm('Are you sure you want to delete this question?');" />
             </div>
         </div> <!-- end Questions -->
      </div> <!-- end questionbox -->
      <script type="text/javascript">
          jQuery(document).ready(function () {
              jQuery(".content").hide();
          });
      </script>
      <script type="text/javascript">
          jQuery(document).ready(function () {
              jQuery('#man').live('click', function (event) {
                  jQuery('.content').toggle('show');
              });
          });
      </script>   
  </ItemTemplate>

an id attribute value has to be used only once on a page.

Daxcode
– Daxcode

2012-03-25 17:52:08 +00:00
Commented Mar 25, 2012 at 17:52 — Daxcode
– Daxcode, Commented Mar 25, 2012 at 17:52

ZeNo · Accepted Answer · 2012-03-25 17:50:27Z

2

try this:

jQuery(document).ready(function () {
        jQuery('#man').live('click', function (event) {
           $(this).closest('.heading').next().toggle('show');
        });
    });

answered Mar 25, 2012 at 17:50

ZeNo

1,6582 gold badges16 silver badges28 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

HGomez Over a year ago

This causes the div to bounce. If the div is hidden and I press the button is goes: Open -> Shut -> Open. Then stays visible/open. Reverse order if the button is pressed again. Any ideas?

HGomez Over a year ago

Solved: I removed the script from the ASP datalist's item template.

Daxcode · Accepted Answer · 2012-03-25 17:53:46Z

1

If you substitute the id attribute with a class value, below code change might work:

jQuery('.man').live('click', function (event) {
    jQuery(this).parents().find(jQuery('.content')).toggle('show');
});

answered Mar 25, 2012 at 17:53

Daxcode

4343 silver badges7 bronze badges

1 Comment

Daxcode Over a year ago

a general note for that: as mentioned in the other comment, you should not use the same id value more than once on a page, since it's an unique identifier. Some browsers could struggle, to identify the correct DOM object if more DOM objects have the same identifier.

user1276958 · Accepted Answer · 2012-03-25 17:55:54Z

0

set ".content" css display:none and write this.

<script type="text/javascript">
    $(document).ready(function () {
        jQuery('#man').toggle(function () {
            jQuery(".content").sliceDown();
        }, function () {
            jQuery(".content").sliceUp();
        });
    });
</script>

answered Mar 25, 2012 at 17:55

user1276958

Collectives™ on Stack Overflow

Show/Hide Certain Div with JQuery on Button Click

3 Answers 3

2 Comments

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

2 Comments

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related