Expansion of a dropdown on Button click

Hi dude,

U can do that with javascript or jquery , however u can use css and html for design.

That functionality can be achieved using jquery easily.

That is jquery slideUp() and SlideDown() functionality on button click event.


For help refer jquery.com site goto documentation and then events

Webquestionss, if this helps please login to Mark As Answer. | Alert Moderator

Hi,
This can be done easily by using JQuery.
ASPX code:-

<asp:Label ID="label1" runat="server">This is Heading</asp:Label>

      <input type="button" id="button2" value="+" style="border:0px;font-size:15px;"/>

      <div id="mydiv" style="display:none;">

        <div>This content line1</div>

        <div>This content line2</div>

        <div>This content line3</div>

        <div>This content line4</div>

        <div>This content line5</div>

       </div>

JQuery code

 <script type="text/javascript">

        $(document).ready(function () {

            $("#button2").click(function () {

                if ($(this).val() == '-') {

                    $("#mydiv").slideUp("slow");

                    $(this).val("+");

                }

                else {

                    $("#mydiv").slideDown("slow");

                    $(this).val("-");

                }

            });

      });

    </script>

In the above code,I have taken one label,one button and a div..This div content is not displayed first and it should be visible on clicking the button.In Jquery code,on button click,We are checking the condition for changing the value of button from '+' to '-' once the content is visible and '-' to '+' if content is not visible and If the button value is '+' ,i have used "slidedown" for div element and "slideup" if it is '-'.

I think this is somewhat helpful for your scenario...
Thanq You..


Dharan23
.Net Learner

Webquestionss, if this helps please login to Mark As Answer. | Alert Moderator

Dear Dharanidhar,

Thankyou for replying your explanation is easy to understand but the above mention code is not working I think the - button is missing.

Webquestionss, if this helps please login to Mark As Answer. | Alert Moderator

Hi,
Thankyou.

Webquestionss, if this helps please login to Mark As Answer. | Alert Moderator

hi,
It works fine...Here it is a basic html button and we are firing click function on that button..It works..check it out once..
Thank you,


Regards
@Dharan23

Webquestionss, if this helps please login to Mark As Answer. | Alert Moderator

Hi,
Another solution is to go with ajax.You can also use ASP.net ajax to do this
There is a control called "CollapsiblePanelExtender" in Asp.Net ajax control toolkit.Use that control which is suitable for your scenario..

Try this,Still if u are not getting,Tell to me.If u get it,Its fine.

Thanking You,
Regards,
@Dharan23

Webquestionss, if this helps please login to Mark As Answer. | Alert Moderator

Hello,
Sorry for the late reply I have just copyied and pasted the above code in VS 2008 source then too its not working and even I have seen your second solution.

Webquestionss, if this helps please login to Mark As Answer. | Alert Moderator

hello,
It works fine.I have checked many times before posting the code.Have u included another script tag which makes jquery to use or work or not ? i.e..
<script type="text/javascript" src="jquery-1.8.2.min.js"></script>

Webquestionss, if this helps please login to Mark As Answer. | Alert Moderator

Hi webquestionss,

It works fine, i think you dint included the java script file. Include the attached file with this comment in to your website/project.
In the head tag, include <script type="text/javascript" src="jquery-1.8.2.min.js"> </script> or simply drag and drop it into file.
This is the minified version of JQuery. This is essential to use the slide up and slide down functions. Here in Visual Studio, a partial intellisense is provided for JQuery.Thus, it is difficult to trace out the error in the code.. Even if a single statement is wrong.. the whole jquery code doesn't execute. Thus, You an include VSDoc from
http://appendto.com/community/jquery-vsdoc to avail JQuery intellisense.

Regards,

 Download source file

Awesome Coding !! :)

Webquestionss, if this helps please login to Mark As Answer. | Alert Moderator

Thanks.

Webquestionss, if this helps please login to Mark As Answer. | Alert Moderator