×
Namespaces

Variants
Actions
(Difference between revisions)

Simple Web Runtime Design Patterns Using jQuery

From Nokia Developer Wiki
Jump to: navigation, search
kiran10182 (Talk | contribs)
m (added relavant code)
hamishwillee (Talk | contribs)
m (Hamishwillee - Tidy wiki text. Fix categories)
 
(17 intermediate revisions by 7 users not shown)
Line 1: Line 1:
[[Category:Web Runtime (WRT)]]
+
[[Category:Symbian Web Runtime]][[Category:Code Examples]][[Category:Mobile Design Patterns]]
[[Category:Design]]
+
{{SeeAlso|
 
+
* [[Simple Web Runtime Design Patterns Using Dojo]]
 +
* [[Simple Web Runtime Design Patterns Using Mootools]]
 +
* [[Simple Web Runtime Design Patterns Using YUI 3]]}}
 +
{{ArticleMetaData <!-- v1.2 -->
 +
|sourcecode= [[Media:ExpandCollapse JQuery.zip]] [[Media:FadeOut JQuery.zip]] [[Media:Slide JQuery.zip]] [[Media:Toggle JQuery.zip]]
 +
|installfile= <!-- Link to installation file (e.g. [[Media:The Installation File.sis]]) -->
 +
|devices= 5th Edition, 5800 Xpress Music
 +
|sdk= <!-- SDK(s) built and tested against (e.g. [http://linktosdkdownload/ Qt SDK 1.1.4]) -->
 +
|platform= <!-- Compatible platforms - e.g. Symbian^1 and later, Qt 4.6 and later -->
 +
|devicecompatability= <!-- Compatible devices e.g.: All* (must have internal GPS) -->
 +
|dependencies= <!-- Any other/external dependencies e.g.: Google Maps Api v1.0 -->
 +
|signing= <!-- Signing requirements - empty or one of: Self-Signed, DevCert, Manufacturer -->
 +
|capabilities= <!-- Capabilities required by the article/code example (e.g. Location, NetworkServices. -->
 +
|keywords= <!-- APIs, classes and methods (e.g. QSystemScreenSaver, QList, CBase -->
 +
|language= <!-- Language category code for non-English topics - e.g. Lang-Chinese -->
 +
|translated-by= <!-- [[User:XXXX]] -->
 +
|translated-from-title= <!-- Title only -->
 +
|translated-from-id= <!-- Id of translated revision -->
 +
|review-by= <!-- After re-review: [[User:username]] -->
 +
|review-timestamp= <!-- After re-review: YYYYMMDD -->
 +
|update-by= <!-- After significant update: [[User:username]]-->
 +
|update-timestamp= <!-- After significant update: YYYYMMDD -->
 +
|creationdate= 20090220
 +
|author= [[User:Darabella]]
 +
}}
  
 
== Simple Web Runtime Design Patterns Using jQuery ==
 
== Simple Web Runtime Design Patterns Using jQuery ==
  
'''
+
Design patterns are “known solutions to common design problems”. The following design patterns make use of the jQuery JavaScript™ library and are intended for designers and developers working with Symbian Web Runtime and the S60 mobile browser.
Introduction to design patterns using jQuery'''
+
Design patterns are “known solutions to common design problems”. The following design patterns make use of the jQuery JavaScript™ library and are intended for designers and developers working with Web Runtime (WRT) and the S60 mobile browser.
+
  
 
“jQuery is a JavaScript™ library that simplifies XHTML document traversing, event handling, animating, and Ajax interactions for rapid web development.” – jQuery Website
 
“jQuery is a JavaScript™ library that simplifies XHTML document traversing, event handling, animating, and Ajax interactions for rapid web development.” – jQuery Website
Line 14: Line 36:
  
  
'''Tip:''' If you’re new to jQuery, why not spend a few minutes exploring [How jQuery Works][http://docs.jquery.com/Tutorials:How_jQuery_Works How jQuery works] and [Getting Started with jQuery][http://docs.jquery.com/Tutorials:Getting_Started_with_jQuery Getting Started with jQuery].
+
'''Tip:''' If you’re new to jQuery, why not spend a few minutes exploring [http://docs.jquery.com/Tutorials:How_jQuery_Works How jQuery works] and [http://docs.jquery.com/Tutorials:Getting_Started_with_jQuery Getting Started with jQuery].
 +
 
 +
'''Use of jQuery on mobile'''
  
'''
 
Use of jQuery on mobile'''
 
 
It is also fortunate that the jQuery library itself has a very small footprint (under 20kb) and performs quite well on mobile devices. This makes it ideal when working with WRT as widgets are essentially one XHTML document containing sub-views, combined with interactivity created through manipulation of the DOM using JavaScript™. Simple, built-in effects such as show/hide, fade and slide all provide a great foundation for creating widgets with a rich user experience.
 
It is also fortunate that the jQuery library itself has a very small footprint (under 20kb) and performs quite well on mobile devices. This makes it ideal when working with WRT as widgets are essentially one XHTML document containing sub-views, combined with interactivity created through manipulation of the DOM using JavaScript™. Simple, built-in effects such as show/hide, fade and slide all provide a great foundation for creating widgets with a rich user experience.
  
''Note:'' The following examples have been tested on the 5th Edition, 5800 Xpress Music. Support for jQuery will vary amongst 3rd Edition devices.
+
''Note:'' Support for jQuery will vary amongst 3rd Edition devices.
 
+
  
 
== 1. Show/Hide design pattern ==
 
== 1. Show/Hide design pattern ==
 
  
 
'''Problem summary'''
 
'''Problem summary'''
Line 30: Line 50:
  
 
'''Use'''
 
'''Use'''
 
+
* To switch views within the widget.
To switch views within the widget.
+
* To show and hide elements within a view.
 
+
* Within a tabbed interface; to show and hide tabbed views.
To show and hide elements within a view.
+
 
+
Within a tabbed interface; to show and hide tabbed views.
+
  
  
Line 41: Line 58:
 
Provide a user or system-initiated trigger to instantly show or hide views or elements within the widget.
 
Provide a user or system-initiated trigger to instantly show or hide views or elements within the widget.
  
[[Image:01-hide.png]]  
+
[[File:01-hide.png|frame|none|This widget has three views yet only one can be active at a time]]  
  
Figure: This widget has three views yet only one can be active at a time.
+
Use the jQuery {{Icode|show()}}, {{Icode|hide()}} and {{Icode|toggle()}} methods from jQuery Effects.
 
+
Use the jQuery show(), hide() and toggle() methods from jQuery Effects.
+
 
<code xml>
 
<code xml>
 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
 
<html>
 
<html>
 
<head>
 
<head>
   <script src="http://code.jquery.com/jquery-latest.js"></script>
+
<title></title>
   <script>
+
   <script src="http://code.jquery.com/jquery-latest.js" type="text/javascript"></script>
   $(document).ready(function(){
+
   <script type="text/javascript">
 +
   $(function(){
 
     $("#btn_list").click(function () {
 
     $("#btn_list").click(function () {
 
       $("#list").show();
 
       $("#list").show();
Line 68: Line 84:
 
   });
 
   });
 
   </script>
 
   </script>
   <style>
+
   <style type="text/css">
 
   div {
 
   div {
 
height: 5em;
 
height: 5em;
Line 92: Line 108:
 
</html>
 
</html>
 
</code>
 
</code>
 +
 +
WRT Widget for the example code can be found from File: [[File:Toggle JQuery.zip|Toggle JQuery.zip]]
  
 
== 2. Slide transition ==
 
== 2. Slide transition ==
Line 100: Line 118:
  
 
'''Use'''  
 
'''Use'''  
 
+
* To gradually hide an item within a view.
To gradually hide an item within a view.
+
  
  
Line 107: Line 124:
 
Create a connection between the original and final view (or state) through use of an animated transition.  
 
Create a connection between the original and final view (or state) through use of an animated transition.  
  
[[Image:02-slide.png]]
+
[[File:02-slide.png|frame|none|The slide transition is used to gradually close the content area]]
 
+
'''Figure:''' The slide transition is used to gradually close the content area.
+
 
+
  
Use the slideUp() and slideDown() methods from jQuery Effects.
+
Use the {{Icode|slideUp()}} and {{Icode|slideDown()}} methods from jQuery Effects.
 
<code xml>
 
<code xml>
 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
 
<html>
 
<html>
 
<head>
 
<head>
   <script src="http://code.jquery.com/jquery-latest.js"></script>
+
<title></title>
   <script>
+
   <script src="http://code.jquery.com/jquery-latest.js" type="text/javascript"></script>
   $(document).ready(function(){
+
   <script type="text/javascript">
 +
   $(function(){
 
     $("#btn_slide").click(function () {
 
     $("#btn_slide").click(function () {
 
       $("#slide").slideUp();
 
       $("#slide").slideUp();
Line 128: Line 143:
 
   });
 
   });
 
   </script>
 
   </script>
   <style>
+
   <style type="text/css">
 
   div {
 
   div {
 
height: 5em;
 
height: 5em;
Line 143: Line 158:
 
</code>
 
</code>
  
 +
WRT Widget for the example code can be found from File: [[File:Slide JQuery.zip|Slide JQuery.zip]]
  
 
''Notes:'' The ‘Slide’ features of ‘jQuery UI’ (an additional jQuery library) may be too resource intensive for use on mobile devices. If used, effects will appear quite sluggish—if they appear at all. Instead, use the standard ‘SlideUp/SlideDown’ from jQuery itself if possible.
 
''Notes:'' The ‘Slide’ features of ‘jQuery UI’ (an additional jQuery library) may be too resource intensive for use on mobile devices. If used, effects will appear quite sluggish—if they appear at all. Instead, use the standard ‘SlideUp/SlideDown’ from jQuery itself if possible.
 
  
 
== 3. Fade in/out ==
 
== 3. Fade in/out ==
Line 153: Line 168:
  
 
'''Use'''  
 
'''Use'''  
 
+
* When transitioning between widget views.
When transitioning between widget views.
+
* To attract attention to, yet smooth out the loading of new data, images or other media.  
 
+
To attract attention to, yet smooth out the loading of new data, images or other media.  
+
 
+
  
 
'''Solution'''
 
'''Solution'''
 
Incorporate a transition to gradually fade the visibility of an element into or out of view.
 
Incorporate a transition to gradually fade the visibility of an element into or out of view.
  
[[Image:03-fade.png]]
+
[[File:03-fade.png|frame|none|The transition is used to gradually fade out View 1 and fade in View 2]]
 
+
'''Figure:''' The transition is used to gradually fade out View 1 and fade in View 2.
+
  
'''*HACK*''' Use WRT’s “fade” transition to simulate the fadeIn() and fadeOut() methods found within jQuery.
+
'''*HACK*''' Use WRT’s “fade” transition to simulate the {{Icode|fadeIn()}} and {{Icode|fadeOut()}} methods found within jQuery.
 
<code xml>
 
<code xml>
 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"  
 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"  
Line 172: Line 182:
 
<html>
 
<html>
 
<head>
 
<head>
   <script src="http://code.jquery.com/jquery-latest.js"></script>
+
<title></title>
   <script>
+
   <script src="http://code.jquery.com/jquery-latest.js" type="text/javascript"></script>
   $(document).ready(function(){
+
   <script type="text/javascript">
 +
   $(function(){
 
     $("#btn_fade").click(function () {
 
     $("#btn_fade").click(function () {
 
  widget.prepareForTransition("fade");
 
  widget.prepareForTransition("fade");
Line 184: Line 195:
 
   });
 
   });
 
   </script>
 
   </script>
   <style>
+
   <style type="text/css">
 
  div {
 
  div {
 
  height: 5em;
 
  height: 5em;
Line 207: Line 218:
 
</code>
 
</code>
  
Notes: As WRT currently does not support opacity through CSS, the standard fadeIn() and fadeout() methods in jQuery do not work as expected. The solution above uses the transition features of WRT to perform a similar effect—in this case simply using the jQuery show() method.
+
WRT Widget for the example code can be found from File: [[File:FadeOut JQuery.zip|FadeOut JQuery.zip]]
 +
 
 +
Notes: As WRT currently does not support opacity through CSS, the standard {{Icode|fadeIn()}} and {{Icode|fadeout()}} methods in jQuery do not work as expected. The solution above uses the transition features of WRT to perform a similar effect—in this case simply using the jQuery {{Icode|show()}} method.
  
 
== 4. Expand/Collapse ==
 
== 4. Expand/Collapse ==
Line 215: Line 228:
  
 
'''Use'''  
 
'''Use'''  
 
+
* To reveal or obscure additional content associated with an element.
To reveal or obscure additional content associated with an element.
+
* Within a messaging application, to temporarily collapse non-critical information such as sender address, date, persons Ccd. etc.
 
+
* When needing to view content (i.e. text, images) that is currently represented in a thumbnail view.
Within a messaging application, to temporarily collapse non-critical information such as sender address, date, persons Ccd. etc.
+
* When making content editable. Ex. Expand a text field to allow for more visible content while editing.
 
+
When needing to view content (i.e. text, images) that is currently represented in a thumbnail view.
+
 
+
When making content editable. Ex. Expand a text field to allow for more visible content while editing.
+
 
+
  
 
'''Solution'''
 
'''Solution'''
 
Hide a portion of this information then provide the user with a means to trigger the reveal of this information when required. This action should be easily discoverable, easy to trigger and the reveal should (ideally) occur in context of the original data.
 
Hide a portion of this information then provide the user with a means to trigger the reveal of this information when required. This action should be easily discoverable, easy to trigger and the reveal should (ideally) occur in context of the original data.
  
[[Image:04-collapse.png ]]
+
[[File:04-collapse.png|frame|none|The area is expanded to reveal additional content ]]
 
+
'''Figure:''' The area is expanded to reveal additional content.
+
  
Use the ‘overflow: hidden’ CSS attribute and then the animate() method within jQuery to increase or decrease the element’s ‘width’ and ‘height’ attribute values over the duration specified (in milliseconds).
+
Use the {{Icode|overflow: hidden}} CSS attribute and then the {{Icode|animate()}} method within jQuery to increase or decrease the element’s {{Icode|width}} and {{Icode|height}} attribute values over the duration specified (in milliseconds).
 
<code xml>
 
<code xml>
 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"  
 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"  
Line 238: Line 244:
 
<html>
 
<html>
 
<head>
 
<head>
   <script src="http://code.jquery.com/jquery-latest.js"></script>
+
<title></title>
   <script>
+
   <script src="http://code.jquery.com/jquery-latest.js" type="text/javascript"></script>
   $(document).ready(function(){
+
   <script type="text/javascript">
 +
   $(function(){
 
     $("#btn_expand").click(function(){
 
     $("#btn_expand").click(function(){
 
       $("#item").animate({height: "15em"}, 1000 );
 
       $("#item").animate({height: "15em"}, 1000 );
Line 249: Line 256:
 
   });
 
   });
 
   </script>
 
   </script>
   <style>
+
   <style type="text/css">
 
   p, h1 {
 
   p, h1 {
 
   padding: 0; margin: 0; }
 
   padding: 0; margin: 0; }
Line 275: Line 282:
 
</code>
 
</code>
  
 +
WRT Widget for the example code can be found from File: [[File:ExpandCollapse JQuery.zip|ExpandCollapse JQuery.zip]]
  
 
''Notes:'' Another way to create expanding and collapsing elements is to hide and show sub-elements causing the display block of the container block to expand and contract as necessary. This method does not typically incorporate animation as a means of transition.
 
''Notes:'' Another way to create expanding and collapsing elements is to hide and show sub-elements causing the display block of the container block to expand and contract as necessary. This method does not typically incorporate animation as a means of transition.

Latest revision as of 06:55, 9 May 2012

Article Metadata
Code ExampleTested with
Devices(s): 5th Edition, 5800 Xpress Music
Article
Created: darabella (20 Feb 2009)
Last edited: hamishwillee (09 May 2012)

Contents

[edit] Simple Web Runtime Design Patterns Using jQuery

Design patterns are “known solutions to common design problems”. The following design patterns make use of the jQuery JavaScript™ library and are intended for designers and developers working with Symbian Web Runtime and the S60 mobile browser.

“jQuery is a JavaScript™ library that simplifies XHTML document traversing, event handling, animating, and Ajax interactions for rapid web development.” – jQuery Website

In recent years, the free and open source jQuery has become extremely popular with visual and interaction designers as a means of easily adding interactivity to designs using techniques they are already familiar with. It allows designers to identify elements from the DOM using CSS selectors, then add unobtrusive JavaScript™ to perform Ajax calls and create simple effects—all with only a few lines of code.


Tip: If you’re new to jQuery, why not spend a few minutes exploring How jQuery works and Getting Started with jQuery.

Use of jQuery on mobile

It is also fortunate that the jQuery library itself has a very small footprint (under 20kb) and performs quite well on mobile devices. This makes it ideal when working with WRT as widgets are essentially one XHTML document containing sub-views, combined with interactivity created through manipulation of the DOM using JavaScript™. Simple, built-in effects such as show/hide, fade and slide all provide a great foundation for creating widgets with a rich user experience.

Note: Support for jQuery will vary amongst 3rd Edition devices.

[edit] 1. Show/Hide design pattern

Problem summary A user must interact with multiple views of an application yet only one view can be visible on-screen at a time.

Use

  • To switch views within the widget.
  • To show and hide elements within a view.
  • Within a tabbed interface; to show and hide tabbed views.


Solution Provide a user or system-initiated trigger to instantly show or hide views or elements within the widget.

This widget has three views yet only one can be active at a time

Use the jQuery show(), hide() and toggle() methods from jQuery Effects.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title></title>
<script src="http://code.jquery.com/jquery-latest.js" type="text/javascript"></script>
<script type="text/javascript">
$(function(){
$("#btn_list").click(function () {
$("#list").show();
$("#detail").hide();
});
$("#btn_detail").click(function () {
$("#list").hide();
$("#detail").show();
});
$("#btn_toggle").click(function () {
$("#list").toggle();
$("#detail").toggle();
});
$("#list").show();
});
</script>
<style type="text/css">
div {
height: 5em;
display: none; }
div#list {
background:#f00; }
div#detail {
background:#0f0; }
</style>
</head>
<body>
<button id="btn_list">List</button>
<button id="btn_detail">Detail</button>
<button id="btn_toggle">Toggle</button>
<div id="list">
<h1>List View</h1>
</div>
 
<div id="detail">
<h1>Detail View</h1>
</div>
</body>
</html>

WRT Widget for the example code can be found from File: File:Toggle JQuery.zip

[edit] 2. Slide transition

Problem summary Abrupt changes in view or state are uncomfortable and often disorienting to the user.

Use

  • To gradually hide an item within a view.


Solution Create a connection between the original and final view (or state) through use of an animated transition.

The slide transition is used to gradually close the content area

Use the slideUp() and slideDown() methods from jQuery Effects.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title></title>
<script src="http://code.jquery.com/jquery-latest.js" type="text/javascript"></script>
<script type="text/javascript">
$(function(){
$("#btn_slide").click(function () {
$("#slide").slideUp();
});
$("#btn_reset").click(function () {
$("#slide").show();
});
});
</script>
<style type="text/css">
div {
height: 5em;
background: #f00; }
</style>
</head>
<body>
<button id="btn_slide">Slide</button>
<button id="btn_reset">Reset</button>
<div id="slide"></div>
<h1>Slide</h1>
</body>
</html>

WRT Widget for the example code can be found from File: File:Slide JQuery.zip

Notes: The ‘Slide’ features of ‘jQuery UI’ (an additional jQuery library) may be too resource intensive for use on mobile devices. If used, effects will appear quite sluggish—if they appear at all. Instead, use the standard ‘SlideUp/SlideDown’ from jQuery itself if possible.

[edit] 3. Fade in/out

Problem summary Abrupt changes in view are uncomfortable and often disorienting to the user.

Use

  • When transitioning between widget views.
  • To attract attention to, yet smooth out the loading of new data, images or other media.

Solution Incorporate a transition to gradually fade the visibility of an element into or out of view.

The transition is used to gradually fade out View 1 and fade in View 2

*HACK* Use WRT’s “fade” transition to simulate the fadeIn() and fadeOut() methods found within jQuery.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" 
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title></title>
<script src="http://code.jquery.com/jquery-latest.js" type="text/javascript"></script>
<script type="text/javascript">
$(function(){
$("#btn_fade").click(function () {
widget.prepareForTransition("fade");
$("#list").toggle();
$("#detail").toggle();
widget.performTransition();
});
$("#list").show();
});
</script>
<style type="text/css">
div {
height: 5em;
display: none; }
div#list {
height: 3em;
background:#f00; }
div#detail {
background:#0f0; }
</style>
</head>
<body>
<button id="btn_fade">Fade Transition</button>
<div id="list">
<h1>List View</h1>
</div>
<div id="detail">
<h1>Detail View</h1>
</div>
</body>
</html>

WRT Widget for the example code can be found from File: File:FadeOut JQuery.zip

Notes: As WRT currently does not support opacity through CSS, the standard fadeIn() and fadeout() methods in jQuery do not work as expected. The solution above uses the transition features of WRT to perform a similar effect—in this case simply using the jQuery show() method.

[edit] 4. Expand/Collapse

Problem summary Users require access to content or functionality but they only need it under certain circumstances and/or there is insufficient space to provide all of it at all times.

Use

  • To reveal or obscure additional content associated with an element.
  • Within a messaging application, to temporarily collapse non-critical information such as sender address, date, persons Ccd. etc.
  • When needing to view content (i.e. text, images) that is currently represented in a thumbnail view.
  • When making content editable. Ex. Expand a text field to allow for more visible content while editing.

Solution Hide a portion of this information then provide the user with a means to trigger the reveal of this information when required. This action should be easily discoverable, easy to trigger and the reveal should (ideally) occur in context of the original data.

The area is expanded to reveal additional content

Use the overflow: hidden CSS attribute and then the animate() method within jQuery to increase or decrease the element’s width and height attribute values over the duration specified (in milliseconds).

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" 
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title></title>
<script src="http://code.jquery.com/jquery-latest.js" type="text/javascript"></script>
<script type="text/javascript">
$(function(){
$("#btn_expand").click(function(){
$("#item").animate({height: "15em"}, 1000 );
});
$("#btn_collapse").click(function(){
$("#item").animate({height: "2.2em"}, 1000 );
});
});
</script>
<style type="text/css">
p, h1 {
padding: 0; margin: 0; }
div#item {
height: 2.2em;
background:#f00;
overflow: hidden; }
div#more {
background:#0f0; }
</style>
</head>
<body>
<button id="btn_expand">Expand</button>
<button id="btn_collapse">Collapse</button>
<div id="item">
<h1>Header</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Maecenas lorem. Duis pellentesque. Cras nec tortor vel lacus fermentum facilisis. Nam id pede eu eros posuere cursus. Mauris dolor ligula, eleifend vitae, aliquam sit amet, bibendum vel, est. Cras sit amet augue sit amet ligula cursus scelerisque.</p>
</div>
<div id="more">
<h1>More...</h1>
</div>
</body>
</html>

WRT Widget for the example code can be found from File: File:ExpandCollapse JQuery.zip

Notes: Another way to create expanding and collapsing elements is to hide and show sub-elements causing the display block of the container block to expand and contract as necessary. This method does not typically incorporate animation as a means of transition.

This page was last modified on 9 May 2012, at 06:55.
159 page views in the last 30 days.

Was this page helpful?

Your feedback about this content is important. Let us know what you think.

 

Thank you!

We appreciate your feedback.

×