BIP KB:
How to add jQuery accordion and remove extra white space
Article By mostafa02
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:
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.
Tags: education, jquery, Programming
Spin Up A VPS Server In No Time Flat
Simple Setup
Full Root Access
Straightforward Pricing
DEPLOY A SECURE VPS SERVER TODAY!Leave a Reply
Feedbacks
![]() This work is licensed under a Creative Commons Attribution- NonCommercial-ShareAlike 4.0 International License. |