KB Knowledge Base
How to add jQuery accordion and remove extra white space

In the Tutorial I will show you have to create a collapsible menu with jQuery accordion for very small space. Here is a screen shot that will illustrates what we will be learning.

  In particular, click on headers to expand/collapse the title and see the information that is hidden inside. It works a lot like tabs. Optionally, toggle to open/closed upon mouse over. Typically the underlying HTML markup might be a series of headers (H3 tags) plus articles and other content divs therefore the content should not have any JavaScript. Here is the source code below:

Sec 1
Lorem Ipsum is simply dummy text used for the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text used since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type sample book. It;s been the default not only five centuries, but also used in electronic typesetting, remaining essentially unchanged.

Sec 2
It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. The point of using Lorem Ipsum is that it has a more-or-less normal distribution of letters, as opposed to using 'Content here, content here', making it look like readable English. Many desktop publishing packages and web page editors now use Lorem Ipsum as their default text type, and a search for 'lorem ipsum' will uncover many web sites still using it. Various versions have evolved over the years.

Sec 3
Contrary to popular belief, Lorem Ipsum is not simply random text. It has roots in a piece of classical Latin literature from 45 BC, making it over 2000 years old. Richard McClintock, a Latin professor at Hampden-Sydney College in Virginia, looked up one of the more obscure Latin words, consectetur, from a Lorem Ipsum passage, and going through the cites of the word in classical literature, discovered the source.

List one
List two
List three

Sec 4
There are many variations of Lorem Ipsum available, but the majority have been altered in some form. If you are going to use a passage of Lorem Ipsum, you need to be sure there isn't anything embarrassing hidden in the middle of text. All the Lorem Ipsum generators on the Internet tend to repeat predefined chunks of text as necessary, making this the first true generator on the Internet.

You should download jquery-ui.css         jquery-1.10.2.js   jquery-ui.js   then replace with //code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css //code.jquery.com/jquery-1.10.2.js //code.jquery.com/ui/1.11.4/jquery-ui.js respectively with path.   Now let’s discuss how to remove the extra white space area after adding this accordion function successfully.

There is nothing but heightStyle option in jquery-ui.js file. This type is named by “String” and the default sitting is “auto” Handles the particular length on the accordion and even each one section. There are three Possible values: "auto": All of the panels is going to be set in place in the peak on the highest pane. "fill": Increase into the attainable top in line with the accordion's parent level. "content": Just about every panel will likely be only as tall as its content. For example, Initialize typically the accordion with all the heightStyle possibility specified:

$( ".selector" ).accordion({

heightStyle: "fill"

});

Practically, you must replace heightStyle: "auto" by heightStyle: "content" which is coded below:   

var accordion = $.widget( "ui.accordion", {

version: "1.11.4",

options: {

active: 0,

animate: {},

collapsible: false,

event: "click",

header: "> li > :first-child,> :not(li):even",

heightStyle: "content",

icons: {

activeHeader: "ui-icon-triangle-1-s",

header: "ui-icon-triangle-1-e"

},

// callbacks

activate: null,

beforeActivate: null

},

});

That’s it for jQuery accordion. It’s very simple to do. If you have and questions about jQuery accordion or comments simply leave them bellow. Give jQuery accordion a try or click here for more How To tutorials on jQuery! I'm sure you will find it as easy as i do.