Not able to hide a div on a button click using js

Question

I have 4 divs and 4 different buttons and i want to hide a particular div when its corresponding button is pressed.

my asp code is

<div class="div2">
    <div class="d1" id="one">
        <h3 class="h3">First Division</h3>
        <hr color="black" />
    <p class="text-green">
        //some text

    </p>
        <br />
        <asp:Button class="btn" ID="Button1" runat="server" Text="Click Me to Hide" />
    </div>
    <div class="d1" id="two">
        <h3 class="h3">Second Division</h3>
        <hr color="black" />
    <p class="text-red" >
        //some text
    </p>
        <br />
        <asp:Button class="btn" ID="Button2" runat="server" Text="Click Me to Hide" />
    </div>
    <div class="d1" id="three">
        <h3 class="h3">Thrid Division</h3>
        <hr color="black" />
    <p class="text-blue">
        //some text
    </p>
        <br />
        <asp:Button class="btn" ID="Button3" runat="server" Text="Click Me to Hide" />
    </div>
    <div class="d1" id="four">
        <h3 class="h3">Fourth Division</h3>
        <hr color="black" />
    <p class="text-yellow">
        //some text
    </p>
        <br />
        <asp:Button class="btn" ID="Button4" runat="server" Text="Click Me to Hide" />
    </div>

and my js code is

$(document).ready(function () {
$("#Button1").click(function () {
    $("#one").hide('slow');
});
$("#Button2").click(function () {
    $("#two").hide('slow');
});
$("#Button3").click(function () {
    $("#three").hide('slow');
});
$("#Button4").click(function () {
    $("#four").hide('slow');
});
});

But nothing is happening on button clicks. What is the reason of such error??

Can you post your HTML?

steven
– steven

2014-04-16 23:46:57 +00:00
Commented Apr 16, 2014 at 23:46 — steven
– steven, Commented Apr 16, 2014 at 23:46

Shekhar Pankaj · Accepted Answer · 2014-05-25 11:58:57Z

2

Add ClientIDMode="Static" to your asp:button, something like this:

<asp:Button ID="Button1" runat="server" ClientIDMode="Static" Text="Button" />

This will make the ID remain the same. It disables the autogenerated names for this control.

Here is the reference for this: http://msdn.microsoft.com/en-us/library/system.web.ui.control.clientid.aspx

Working Fiddle..have a look on below link it is working Fine Fiddle

edited May 25, 2014 at 11:58

answered Apr 16, 2014 at 23:49

Shekhar Pankaj

9,1453 gold badges31 silver badges49 bronze badges

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

Comments

Chris Brickhouse · Accepted Answer · 2014-04-16 23:53:03Z

0

make sure to put e.preventDefault() in each error handler. for example

$("#Button1").click(function (e) {
    e.preventDefault();
    $("#one").hide('slow');
});

if you don't do this, it will cause an asp.net postback as these buttons are inside the form tag. and like another user said, remove runat="server", as this can change your id's.

you don't even need asp:button for this, you can just use html.

<button id="#Button1">Button Label</button>

answered Apr 16, 2014 at 23:53

Chris Brickhouse

6485 silver badges15 bronze badges

4 Comments

Shekhar Pankaj Over a year ago

and like another user said, remove runat="server",... what if needs to have some postbacks?

Chris Brickhouse Over a year ago

he doesn't need postbacks for what he's doing. he's just showing a div. if he does need a postback, he does need the runat="server" attribute.

Shekhar Pankaj Over a year ago

asking him to Remove runat=server will take him to another conclusion instead you should have asked him to add ClientIDMode="Static"

Chris Brickhouse Over a year ago

why would he need his buttons to run on the server if he isn't going to bind them to a codebehind event handler?

afzalulh · Accepted Answer · 2014-04-17 00:39:08Z

0

Simply change your JQuery to this:

$(document).ready(function () {
    $('.btn').on('click',function (e) {
        e.preventDefault();
        $(this).closest('.d1').hide('slow');
    });
});

answered Apr 17, 2014 at 0:39

afzalulh

7,9432 gold badges28 silver badges37 bronze badges

Collectives™ on Stack Overflow

Not able to hide a div on a button click using js

3 Answers 3

Comments

4 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

4 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related