w3resource logo


jquery UI exercises

jQuery UI Practical exercises, practice, solution - Fundamental-I

Secondary Nav

jQuery UI Fundamental - I exercises [ 50 exercises with solution ]

[An editor is available at the bottom of the page to write and execute the scripts.]

1. Convert three headers and content panels into an accordion. Initialize the accordion and active the second option. Go to the editor

Note : Accordion - Displays collapsible content panels for presenting information in a limited amount of space.

<body>
<div id="accordion">
<h3>jQuery</h3>
<div>jQuery is a fast, small, and feature-rich JavaScript library.</div>
<h3>jQuery UI</h3>
<div>jQuery UI is a curated set of user interface interactions, effects, widgets, and themes built on top of the jQuery JavaScript Library. </div>
<h3>jQuiry Mobile</h3>
<div>jQuery Mobile is a HTML5-based user interface system designed to make responsive web sites and apps that are accessible on all smartphone, tablet and desktop devices</div>
</div>
</body>

You can see the output from here

Click me to see the solution

2. Convert three headers and content panels into an accordion. Initialize the accordion and specify the animate option. Go to the editor

Note : Accordion - Displays collapsible content panels for presenting information in a limited amount of space.

<body>
<div id="accordion">
<h3>jQuery</h3>
<div>jQuery is a fast, small, and feature-rich JavaScript library.</div>
<h3>jQuery UI</h3>
<div>jQuery UI is a curated set of user interface interactions, effects, widgets, and themes built on top of the jQuery JavaScript Library. </div>
<h3>jQuiry Mobile</h3>
<div>jQuery Mobile is a HTML5-based user interface system designed to make responsive web sites and apps that are accessible on all smartphone, tablet and desktop devices</div>
</div>
</body>

You can see the output from here

Click me to see the solution

3. Convert three headers and content panels into an accordion. Initialize the accordion and specify the collapsible option. Go to the editor

Note : Accordion - Displays collapsible content panels for presenting information in a limited amount of space.

<body>
<div id="accordion">
<h3>jQuery</h3>
<div>jQuery is a fast, small, and feature-rich JavaScript library.</div>
<h3>jQuery UI</h3>
<div>jQuery UI is a curated set of user interface interactions, effects, widgets, and themes built on top of the jQuery JavaScript Library. </div>
<h3>jQuiry Mobile</h3>
<div>jQuery Mobile is a HTML5-based user interface system designed to make responsive web sites and apps that are accessible on all smartphone, tablet and desktop devices</div>
</div>
</body>

You can see the output from here

Click me to see the solution

4. Convert three headers and content panels into an accordion. Initialize the accordion and specify the disabled option. Go to the editor

Note : Accordion - Displays collapsible content panels for presenting information in a limited amount of space.

<body>
<div id="accordion">
<h3>jQuery</h3>
<div>jQuery is a fast, small, and feature-rich JavaScript library.</div>
<h3>jQuery UI</h3>
<div>jQuery UI is a curated set of user interface interactions, effects, widgets, and themes built on top of the jQuery JavaScript Library. </div>
<h3>jQuiry Mobile</h3>
<div>jQuery Mobile is a HTML5-based user interface system designed to make responsive web sites and apps that are accessible on all smartphone, tablet and desktop devices</div>
</div>
</body>

You can see the output from here

Click me to see the solution

5. Convert three headers and content panels into an accordion. Initialize the accordion and specify the event. Go to the editor

Note : Accordion - Displays collapsible content panels for presenting information in a limited amount of space.

<body>
<div id="accordion">
<h3>jQuery</h3>
<div>jQuery is a fast, small, and feature-rich JavaScript library.</div>
<h3>jQuery UI</h3>
<div>jQuery UI is a curated set of user interface interactions, effects, widgets, and themes built on top of the jQuery JavaScript Library. </div>
<h3>jQuiry Mobile</h3>
<div>jQuery Mobile is a HTML5-based user interface system designed to make responsive web sites and apps that are accessible on all smartphone, tablet and desktop devices</div>
</div>
</body>

You can see the output from here

Click me to see the solution

6. Convert three headers and content panels into an accordion. Initialize the accordion and specify the header option. Go to the editor

Note : Accordion - Displays collapsible content panels for presenting information in a limited amount of space.

<body>
<div id="divid">
<h2>jQuery</h2>
<div>jQuery is a fast, small, and feature-rich JavaScript library.</div>
<h2>jQuery UI</h2>
<div>jQuery UI is a curated set of user interface interactions, effects, widgets, and themes built on top of the jQuery JavaScript Library. </div>
<h2>jQuiry Mobile</h2>
<div>jQuery Mobile is a HTML5-based user interface system designed to make responsive web sites and apps that are accessible on all smartphone, tablet and desktop devices</div>
</div>
</body>

You can see the output from here

Click me to see the solution

7. Convert three headers and content panels into an accordion. Initialize the accordion and specify the height. Go to the editor

Note : Accordion - Displays collapsible content panels for presenting information in a limited amount of space.

<body>
<div id="divid">
<h2>jQuery</h2>
<div>jQuery is a fast, small, and feature-rich JavaScript library.</div>
<h2>jQuery UI</h2>
<div>jQuery UI is a curated set of user interface interactions, effects, widgets, and themes built on top of the jQuery JavaScript Library. </div>
<h2>jQuiry Mobile</h2>
<div>jQuery Mobile is a HTML5-based user interface system designed to make responsive web sites and apps that are accessible on all smartphone, tablet and desktop devices</div>
</div>
</body>

You can see the output from here

Click me to see the solution

8. Convert three headers and content panels into an accordion. Initialize the accordion and specify the icon (+, -) option. Go to the editor

Note : Accordion - Displays collapsible content panels for presenting information in a limited amount of space.

<body>
<div id="divid">
<h3>jQuery</h3>
<div>jQuery is a fast, small, and feature-rich JavaScript library.</div>
<h3>jQuery UI</h3>
<div>jQuery UI is a curated set of user interface interactions, effects, widgets, and themes built on top of the jQuery JavaScript Library. </div>
<h3>jQuiry Mobile</h3>
<div>jQuery Mobile is a HTML5-based user interface system designed to make responsive web sites and apps that are accessible on all smartphone, tablet and desktop devices</div>
</div>
</body>

You can see the output from here

Click me to see the solution

9. Create a pre-populated list of values and focus on the first item when the menu is shown. Go to the editor

You can see the output from here

Click me to see the solution

10. Create a pre-populated list of values and delay in milliseconds between a keystroke occurs and a search is performed. Go to the editor

You can see the output from here

Click me to see the solution

11. Create a pre-populated list of values and disables the autocomplete. Go to the editor

Click me to see the solution

12. Create a pre-populated list of values and fixed minimum number of characters in two, a user must type before a search is performed. Go to the editor

Click me to see the solution

13. Create a pre-populated list of values and initialize the autocomplete position right top and right bottom. Go to the editor

Click me to see the solution

14. Initialize the autocomplete and specify the source option. Go to the editor

Click me to see the solution

15. Initialize the button and specify the disable option. Go to the editor

Click me to see the solution

16. Initialize the button and specify an icon on the button. Go to the editor

Click me to see the solution

17. Initialize the button and do not show the label. Go to the editor

Click me to see the solution

18. Initialize the buttonset and specify disabled option true. Go to the editor

Click me to see the solution

19. Create a simple jQuery UI Datepicker. Now pick a date and store it in a textbox. Go to the editor

Click me to see the solution

20. Initialize the datepicker. Now pick a date from the datepicker into a textbox and update the date in another textbox. Go to the editor

Click me to see the solution

21. Create a simple jQuery UI Datepicker. Show the required date format after the date field. Go to the editor

Click me to see the solution

22. Initialize the datepicker and autoSize the date field. Go to the editor

Click me to see the solution

23. Initialize the datepicker and display a button Image. Go to the editor

Click me to see the solution

24. Initialize the datepicker and show a button text. Go to the editor

Click me to see the solution

25. Initialize the datepicker and calculate the week of the year. Use the default implementation ISO 8601. Go to the editor

Click me to see the solution

26. Initialize the datepicker and rendered the month as a dropdown instead of text. Go to the editor

Click me to see the solution

27. Initialize the datepicker and rendered the year as a dropdown instead of text. Go to the editor

Click me to see the solution

28. Initialize the datepicker and specify the date format. Go to the editor

Click me to see the solution

29. Initialize the datepicker and specify the day names in French. Go to the editor

Click me to see the solution

30. Initialize the datepicker with minimized day names, starting from Sunday. Go to the editor

Click me to see the solution

31. Initialize the datepicker and set the duration fast. Go to the editor

Click me to see the solution

32. Initialize the datepicker and set the first day of the week as Monday. Go to the editor

Note:Sunday is 0, Monday is 1 etc.

Click me to see the solution

33. Initialize the datepicker and draw current language from right to left. Go to the editor

Click me to see the solution

34. Initialize the datepicker and display number of days one month from today. Go to the editor

Click me to see the solution

35. Initialize the datepicker and display number of days from current date. Go to the editor

Click me to see the solution

36. Initialize the datepicker and specify the month names. Go to the editor

Click me to see the solution

37. Initialize the datepicker and specify the month names in short form. Go to the editor

Click me to see the solution

38. Initialize the datepicker and change the text to display for the next month link. Go to the editor

Click me to see the solution

39. Initialize the datepicker and set two rows and display two months in a single row. Go to the editor

Click me to see the solution

40. Initialize the datepicker and change the text to display for the previous month link. Go to the editor

Click me to see the solution

41. Initialize the datepicker and display dates in other months at the start or end of the current month. Go to the editor

Click me to see the solution

42. Initialize the datepicker and create an animation to show and hide the datepicker. Go to the editor

Click me to see the solution

43. Initialize the datepicker and display a button panel underneath the calendar. Go to the editor

Note:The button pane contains two buttons, a Today button that links to the current day, and a Done button that closes the datepicker. The buttons' text can be customized using the currentText and closeText options respectively.

Click me to see the solution

44. Initialize the datepicker and display two months and defines position one to display the current month in. Go to the editor

Click me to see the solution

45. Initialize the datepicker and show the month before or after the year in the header. Go to the editor

Click me to see the solution

46. Initialize the datepicker and it will appear when a button is clicked. Go to the editor

Click me to see the solution

47. Initialize the datepicker and display dates in other months. Go to the editor

Click me to see the solution

48. Initialize the datepicker and add a column to show the week of the year. Go to the editor

Click me to see the solution

49. Initialize the datepicker with two months to move when clicking the previous or next links. Go to the editor

Click me to see the solution

50. Initialize the datepicker and specify a text to display for the week of the year column heading. Go to the editor

Click me to see the solution

More to Come !

Go Top

* To run the code mouse over on Output panel and click on 'Run with JS' button.*

JS Bin



Join our Question Answer community to learn and share your programming knowledge.

Help the community:

PHP: Loop

JavaScript: Delete duplicates in an array

Oracle: Round the number