More examples provided in the demo

Sometimes we’re convinced that certain special effects we see in web pages are some sort of cult voodoo and appear mysterious. The ‘slide toggle’ effect is one of those. We’re going to show you just how easy it is to use this cool feature for revealing hidden content.

We’re going to make a simple panel slider using the JQuery toggle function. Here’s how the code will look:

Code Explanation

Let’s break this down to show how simple it is using JQuery

$(document).ready(function() {

Our standard JQuery statement declaring that when the document is fully loaded we can execute the following

$(“.trigger”).click(function(){

Here we are stating that our page element with the class ‘trigger’ is going to do something when it’s clicked on

$(“.panel”).slideToggle(“slow”);

Here we see the details of our instructions for when the ‘trigger’ is clicked. Essentially telling the div with the class name ‘panel’ to ‘slide – Toggle’ open. The ‘Toggle’ part means that it will open when clicked then close when clicked again.

The HTML

The HTML is relatively simple. First, though, we need a little styling for our elements

Followed by our HTML which is entirely up to you how you want it to look. For our demo purposes we’re using just the standard Lorem Ipsum text jargon:

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
Section 1.10.32 of de Finibus Bonorum et Malorum, written by Cicero in 45 BC

The standard Lorem Ipsum passage, used since the 1500s

Live Demo

To get a live view of the sliding/toggling panel Click Here

Share on Facebook

AJAX Auto Completers

1. AJAX AutoSuggest: An AJAX auto-complete text field

2. AJAX Autocompleter / script.aculo.us library

3. Another AJAX AutoCompleter

4. Ajax autosuggest/autocomplete from database

5. Ajax dynamic list

AJAX Instant Edit

6. AJAX inline text edit 2.0

7. AJAX & CSS Flickr-like Editing Fields

8. AJAX Instant Edit

AJAX Menus, Tabs

9. 14 Tab-Based Interface Techniques

10. AJAX Menu Widget

11. AJAX Accordion Navigation: mootools demos

12. AJAX Dialogs, Menus, Grids, Trees and Views

13. AJAX Tab Module – Closeable Implementation

14. Ajax Tabs Content

16. MooTabs – Tiny tab class for MooTools

17. Dynamically loaded articles

AJAX Date, Time, Calendars

18. AJAX Datetime Toolbocks – Intuitive Date Input Selection

19. AJAX Calendars

AJAX Interactive Elements

20. AJAX Floating Windows

21. AJAX Star Rating Bar

22. Ajax poller

AJAX Developer’s Suite

23. AJAX HistoryManager, Pagination

24. AJAX Login System Demo

25. AJAX image preloader

26. AJAX Tooltips: Nice Titles revised | Blog | 1976design.com

27. 40+ Tooltips Scripts With AJAX, JavaScript & CSS | Smashing Magazine

28. AJAX Web Controls

29. AJAX syntaxhighlighter

32. Transparent Message

33. ModalBox — An easy way to create popups and wizards

35. Chained select boxes

36. Fly to basket

37. AJAX Key Events Signal

38. Disable form submit on enter keypress

Enhanced AJAX Solutions

39. AJAX Instant Completion : Rico Framework

40. Novemberborn: Event Cache

41. Altering CSS Class Attributes with JavaScript

42. Select Some Checkboxes JavaScript Function

43. AJAX Emprise Charts: 100% Pure JavaScript Charts

44. amCharts: customizable flash Pie & Donut chart

45. PJ Hyett : The Lightbox Effect without Lightbox

Ajax Forms

46. AJAX Upload Form

47. An AJAX contact form

48. AJAX contact form

49. Ajax.Form: mootools demo

50. Ajax form validation

51. Really easy field validation

52. AJAX fValidate: a high quality javascript form validation tool

53. Ajax newsletter form

54. wForms: A Javascript Extension to Web Forms – The Form Assembly

AJAX Grids, Tables

55. Data Grids with AJAX, DHTML and JavaScript | Smashing Magazine

56. Grid3 Example

57. AJAX Table Sort Script (revisited)

58. AJAX Sortable Tables: from Scratch with MochiKit

59. AJAX TableKit

AJAX Lightboxes, Galleries, Showcases

60. 30 Scripts For Galleries, Slideshows and Lightboxes | Smashing Magazine

61. AJAX LightBox, Sexy Box, Thick Box

62. AJAX Lightbox JS

63. AJAX Unobtrusive Popup – GreyBox

64. SmoothGallery: Mootools Mojo for Images | Full gallery

65. AJAX Libraries and Frameworks

Visual Effects, Animation

66. How to Create Digg Comment Style Sliding DIVs with Javascript and CSS

67. How to Create a Collapsible DIV with Javascript and CSS

68. How to Create an Animated, Sliding, Collapsible DIV with Javascript and CSS

69. AJAX Shopcart

70. Draggable content

71. Dragable RSS boxes

72. AJAX Pull Down Effect: Rico Framework

73. AJAX Animation Effects: Rico Framework

74. Combination Effects in scriptaculous wiki

75. AJAX Motion Transition: Fx.Morph

Useful Basic JavaScripts

76. 9 Javascript(s) you better not miss !!

77. Top 10 custom JavaScript functions of all time

78. Hyperdisc Materials: JavaScript: Top 10: Automatic Breadcrumb Trail

79. JavaScript: Top 10 Most Useful JavaScripts

80. My Favorite Javascripts for Designers: Blakems.com ?

Galleries, Resources

81. MiniAjax.com: a showroom of nice looking simple downloadable DHTML and AJAX scripts.

82. Ajax Rain: growing showcase of AJAX-examples.

83. Max Kiesler – mHub : Ajax and rails examples & how-to’s

84. Ajax Resources

85. DZone Snippets: Store, sort and share source code, with tag goodness

Share on Facebook