use jquery accordion on ASP.NET

i try to use accordion to display 2 (p / panels / div)
1st p : 2 textboxes 1 button
2nd p : 3 textboxes 1 button

with the article :
http://www.webdesignerwall.com/tutorials/jquery-tutorials-for-designers/
<html xmlns="http://www.w3.org/1999/xhtml" >
<head runat="server">
    <title></title>
     <script type='text/javascript'
src='script/jquery.js'>
</script>
    
    <script type="text/javascript">
    
      function pageLoad() {
      }
    
    </script>
</head>
<body>
    <form id="form1" runat="server">
    <script type="text/javascript">
        $(document).ready(function() {

            $(".accordion2 h3").eq(2).addClass("active");
            $(".accordion2 p").eq(2).show();

            $(".accordion2 h3").click(function() {
                $(this).next("p").slideToggle("slow")
	  .siblings("p:visible").slideUp("slow");
                $(this).toggleClass("active");
                $(this).siblings("h3").removeClass("active");
            });

        });
    
    
    </script>
    <div>
        <asp:ScriptManager ID="ScriptManager1" runat="server" />
        <div class="accordion2">
        <p>
            sadasdasdasdas
        </p>
        </div>
    </div>
    </form>
</body>

Open in new window

LVL 1
doramail05Asked:
Who is Participating?
 
Steve KrileConnect With a Mentor Commented:
Here is a very simple setup that is essentially the functionality you are looking for.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script src="http://code.jquery.com/jquery-1.4.2.min.js" language="javascript"></script>

<style>
	.accordion {}
	.accordion h3 {cursor:pointer;}
	.content {display:none;border:solid 1px;}
</style>
</head>

    <script type="text/javascript">
        $(document).ready(function() {
			//find any h3 tag inside an object with the class accordion
			$(".accordion h3").click(function(){
				//slide up or down the very next item after the h3 tag (in our case, a div)
				$(this).next().slideToggle();
			});

        });


    </script>
<body>

    <div>
        <div class="accordion">
        	<h3>This is an Accordion</h3>
        	<div class="content">
        		Hi there.  I am content.<br/><br/><br/><br/><br/>
        	</div>
        </div>
    </div>
</body>




</html>

Open in new window

0
 
muhammadyasirCommented:
first remove this <asp:ScriptManager ID="ScriptManager1" runat="server" />
0
 
doramail05Author Commented:
removed.
0
Cloud Class® Course: Certified Penetration Testing

This CPTE Certified Penetration Testing Engineer course covers everything you need to know about becoming a Certified Penetration Testing Engineer. Career Path: Professional roles include Ethical Hackers, Security Consultants, System Administrators, and Chief Security Officers.

 
doramail05Author Commented:
i see, it works like a drill down,

adding one h3 is equivalent to one accordion, and adding another accordion h2 will be larger font will similar function.
0
 
Steve KrileCommented:
The div tags, and h3 tags are just normal HTML elements.  Webuse jquery to add animation to these elements in various ways.  The code I attached uses jquery to "find" (or in jquery terminology, "select") any h3 tag, then bind a "click" event to the h3 tag.  Once that is done, inside the click event we describe what we want to happen when a user clucks.  In this case we use jquery's built-in animation to slide a div tag section.
0
 
doramail05Author Commented:
if we would like to add another accordion,
0
 
Steve KrileCommented:
Ahh, that is the real beauty of jquery.  Just copy and paste the div section with the class=accordion directly below the first one.  Now you will have two.  You don't need to change the code in the script tag.
0
 
doramail05Author Commented:
ok, since it is something similar to article, i give points bit less than full, ok?.
0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

All Courses

From novice to tech pro — start learning today.