C# .NET - jQuery accordion needed

Asked By Elvin

19-Dec-11 10:57 AM

I need to make a jQuery accordion which drops down after clicking on the heading and shows content.

dipa ahuja replied to Elvin

19-Dec-11 11:00 AM

You can use more simply with Ajax accordion

dipa ahuja replied to Elvin

19-Dec-11 11:08 AM

The example of jquery:

<html>
<head>
  <base href="http://www.ajaxdaddy.com/media/demos/play/1/accordion/interface-accordion/" />
  <meta http-equiv="Content-Language" content="en" />
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  <title>Accordion - Interface plugin for jQuery</title>
  <script type="text/javascript" src="javascript/jquery.js"></script>
  <script type="text/javascript" src="javascript/interface.js"></script>
  <link type="text/css" href="css/interface-accordion.css" rel="stylesheet">
</head>
<body>
  <form runat="server">
  <dl id="myAccordion">
    <dt class="someClass">Pane 1</dt>
    <dd>
      <p>
        Welcome to Pane1Welcome to Pane1Welcome to Pane1Welcome to Pane1
        <p>
        </p>
    </dd>
    <dt class="someClass">Pane2</dt>
    <dd>
      <p>
        Welcome to Pan 2 Welcome to Pan 2 Welcome to Pan 2
      </p>
    </dd>
    <dt class="someClass">Pane 3</dt>
    <dd>
      <p>
        Welcome to Pan 3Welcome to Pan 3Welcome to Pan 3
      </p>
    </dd>
    <dt class="someClass">Pan 4</dt>
    <dd>
      <p>
        Welcome to Pan 4 Welcome to Pan 4 Welcome to Pan 4 Welcome to Pan 4
      </p>
    </dd>
  </dl>
  <script type="text/javascript">
 
    $(document).ready(
		function () {
		  $('#myAccordion').Accordion(
				{
				  headerSelector: 'dt',
				  panelSelector: 'dd',
				  activeClass: 'myAccordionActive',
				  hoverClass: 'myAccordionHover',
				  panelHeight: 200,
				  speed: 300
				}
			);
		}
	);
  </script>
  </form>
</body>
</html>

Suchit shah replied to Elvin

19-Dec-11 11:55 AM

Check below example of JQUERY Accordian

<!DOCTYPE html>

<html>

<head>

<link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/base/jquery-ui.css" rel="stylesheet" type="text/css"/>

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js"></script>

<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js"></script>

<script>

$(document).ready(function() {

$("#accordion").accordion();

});

</script>

</head>

<body style="font-size:62.5%;">

<div id="accordion">

<h3><a href="#">Section 1</a></h3>

<div>

<p>

Mauris mauris ante, blandit et, ultrices a, suscipit eget, quam. Integer

ut neque. Vivamus nisi metus, molestie vel, gravida in, condimentum sit

amet, nunc. Nam a nibh. Donec suscipit eros. Nam mi. Proin viverra leo ut

odio. Curabitur malesuada. Vestibulum a velit eu ante scelerisque vulputate.

</p>

</div>

<h3><a href="#">Section 2</a></h3>

<div>

<p>

Sed non urna. Donec et ante. Phasellus eu ligula. Vestibulum sit amet

purus. Vivamus hendrerit, dolor at aliquet laoreet, mauris turpis porttitor

velit, faucibus interdum tellus libero ac justo. Vivamus non quam. In

suscipit faucibus urna.

</p>

</div>

<h3><a href="#">Section 3</a></h3>

<div>

<p>

Nam enim risus, molestie et, porta ac, aliquam ac, risus. Quisque lobortis.

Phasellus pellentesque purus in massa. Aenean in pede. Phasellus ac libero

ac tellus pellentesque semper. Sed ac felis. Sed commodo, magna quis

lacinia ornare, quam ante aliquam nisi, eu iaculis leo purus venenatis dui.

</p>

<ul>

<li>List item one</li>

<li>List item two</li>

<li>List item three</li>

</ul>

</div>

<h3><a href="#">Section 4</a></h3>

<div>

<p>

Cras dictum. Pellentesque habitant morbi tristique senectus et netus

et malesuada fames ac turpis egestas. Vestibulum ante ipsum primis in

faucibus orci luctus et ultrices posuere cubilia Curae; Aenean lacinia

mauris vel est.

</p>

<p>

Suspendisse eu nisl. Nullam ut libero. Integer dignissim consequat lectus.

Class aptent taciti sociosqu ad litora torquent per conubia nostra, per

inceptos himenaeos.

</p>

</div>

</body>

</html>

kalpana aparnathi replied to Elvin

19-Dec-11 12:03 PM

hi,

<script type="text/javascript">

$(document).ready(function(){

$("#accordion").accordion( { active: false, collapsible: true });

});

<cc1:Accordion ID="Accordion1" runat="server" FadeTransitions="true" Visible="true" AutoSize="None"SelectedIndex="-1" RequireOpenedPane="false" TransitionDuration="250"

HeaderCssClass="accordionHeader toggler" ContentCssClass="accordionContent expanded toggler">

<HeaderTemplate>

<b style="color: Black">

<%#Eval("Ques")%>

</b>

</HeaderTemplate>

<ContentTemplate>

<p> <%#DataBinder.Eval(Container.DataItem, "QuesAns")%></p>

</ContentTemplate>

</cc1:Accordion>

Elvin replied to Suchit shah

19-Dec-11 01:35 PM

A million thanks to you. You sure had made it simple for me and others. The other tutorials above and below your are good, but they missed the css style sheet that was needed to make it work. The first one I tried and did not work saying format is not suported for Alax accordion and did not leave a message telling me which web page type to use. I guess it was Ajax web page, but I was using the regular website page in Visual Studio 2010. Again much thanks. Your tutorial I will never forget.

Suchit shah replied to Elvin

20-Dec-11 12:11 AM

DEAR YOU ARE MOST WELCOME

Vickey F replied to Elvin

20-Dec-11 12:33 AM

After adding jquery ui plugin you can use jquery Accordian like this-

<script>
$(function() {
$( "#accordion" ).accordion();
});
</script>

<div id="accordion">

<h3><a href="#">Section 1</a></h3>
<div>
</div>

<h3><a href="#">Section 2</a></h3>
<div>
</div>

<h3><a href="#">Section 3</a></h3>
<div>

</div>

</div>

For more help follow this link-

http://jqueryui.com/demos/accordion/

Here you will get example.

James H replied to Elvin

20-Dec-11 12:37 AM

Example http://pastebin.me/pastebin/_design/pastebin.me/_show/raw/7e9a706bada549281fd1379b46722145. If you select one of the accordion headers then refresh the page the last accordian panel you clicked is opened by default

I see this as a pure client responsibility. I would store the information in a cookie http://plugins.jquery.com/project/cookie which you can read and pass to the accordion constructor. I would prefer this over passing values to and from the server for no real benefit.

Something along these lines

//get persisted active accoridan index
var activeIndex  = $.cookie('accordianActiveIndex');

//guard code here to check you have a valid activeIndex...

$('.selector').accordion({
       active: activeIndex,
       change: function(event, ui) { 
           //set cookie here to new active header (index)
           $.cookie('accordianActiveIndex', ui.newHeader.prevAll().length)
      }
});

Changes in VIsual Studio 2010 .NET Framework

Changes in VIsual Studio 2010 .NET Framework Any major changes in the interface for Visual Studio 2010? Same requirements? Visual Studio .NET Discussions Visual Studio 2010 (1) PM (1) Msdn (1) A quick search for "what

which is batter for visual studio 2008 or visual studio 2010.

which is batter for visual studio 2008 or visual studio 2010. Can any one tell me for I want to install visual studio so which is batter for visual studio 2008 or visual studio 2010 & why is batter?? Please tell me also diff between

SharePoint 2010 Visual Web Parts using Visual Studio 2010, Feature Designer and Package Designer

SharePoint 2010 Visual Web Parts using Visual Studio 2010, Feature Designer and Package Designer How to create a Visual Web Part in Visual Studio 2010 and how to deploy it to the SharePoint 2010 team site. What is a

MS Visual Studio 2010 "Change Icon" - please help Windows 7

MS Visual Studio 2010 "Change Icon" - please help Windows 7 Guest OS: Windows XP Pro SP3 IDE: MS Visual Studio 2010 I have MS Visual Studio 2010 in Quick Launch but the color scheme of the default icon for the IDE

Cannot Update my computer Windows 7

of the log into your reply, please. MowGreen [MVP 2003-2007] = = = = = = = = = = = = = = = *-343-* FDNY Never Forgotten = = = = = = = = = = = = = = = 2010-05-07 13:58:39:189 1300 11f4 Agent * Title = Security Update for Windows Vista (KB980232) 2010-05-07 13:58:39:189 1300 11f4 Agent * UpdateId = {0F6F26DC-954A-4B23-8CC4-1449D8100EB1 102 2010-05-07 13:58:39:189 1300 11f4 Agent * Bundles 1 updates: 2010-05-07 13:58:39:189 1300 11f4 Agent * {72A0ABD5-DACF-42E2-96D0-9404E9E849FF}.102 2010-05-07 13:58:39:189 1300 11f4 Agent * Title = Update for Microsoft Office Word 2007 (KB974561) 2010-05-07 13:58:39:189 1300 11f4 Agent * UpdateId = {9452E2DD-399E-430C-A7F6-81065B8BD447}.105 2010-05-07 13:58:39:189 1300 11f4 Agent * Bundles 1 updates: 2010-05-07 13:58:39:189 1300 11f4 Agent * {CEBBE511-0B1D-493F-B9B0-32FFABD36B46}.105