Accordion is part of IntegralUI Studio for Web
a suite of UI Components for development of web apps
a suite of UI Components for development of web apps
Advanced User Interface Controls and Components
Created: 07 April 2014
In this article you will learn how to use built-in feature of IntegralUI Accordion jQuery widget to create groups which expands its content horizontally in single line.
In order for Accordion to display its groups in single horizontal line, we need to set the expandDirection property to either left or right. Additionally, the widget height needs to be adjusted so the content will appear in sinlge line. Using CSS we are setting widget height to 33px.
At first let’s add some groups to the Accordion widget. We can do this using HTML or JavaScript code, in this case we will use JavaScript.
$(document).ready(function() {
// Create an instance of Accordion widget
var $bar = $('#accordion').accordion({
expandDirection: 'right',
hoverSelection: true
});
// Suspend the Accordion layout to increase performance
$bar.accordion("suspendLayout");
$bar.accordion("addGroup", {
headerContent: "<div class='caption'>Art</div>",
content: generateGroupContent()
});
$bar.accordion("addGroup", {
headerContent: "<div class='caption'>Books</div>",
content: generateGroupContent()
});
$bar.accordion("addGroup", {
headerContent: "<div class='caption'>Music</div>",
content: generateGroupContent()
});
$bar.accordion("addGroup", {
headerContent: "<div class='caption'>Sports</div>",
content: generateGroupContent()
});
$bar.accordion("addGroup", {
headerContent: "<div class='caption'>Tech</div>",
content: generateGroupContent()
});
// Resume and update the layout of Accordion
$bar.accordion("resumeLayout");
});
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="css/integralui.accordion.css" />
<link rel="stylesheet" href="css/themes/theme-blue.css" />
<script type="text/javascript" src="external/jquery-1.9.1.min.js"></script>
<script type="text/javascript" src="external/jquery.ui.core.min.js"></script>
<script type="text/javascript" src="external/jquery.ui.widget.min.js"></script>
<script type="text/javascript" src="js/jquery.integralui.widget.min.js"></script>
<script type="text/javascript" src="js/jquery.integralui.accordion.min.js"></script>
</head>
<body>
<div id="accordion" class="widget"></div>
</body>
</html>
.caption
{
display: inline-block;
margin: 0;
padding: 0 5px;
font-size: 1em;
font-weight: normal;
}
.group-content
{
padding: 5px;
position: relative;
}
.group-content a
{
float: right;
background: green;
border: thin solid black;
border-radius: 3px;
color: white;
padding: 0 5px;
text-decoration: none;
}
.widget
{
width: 650px;
height: 33px;
}
Each group header can accept text or any custom HTML generated content. This allows us to customize the appearance of groups. As it can be seen from code above, to add a custom content to group header we are using the headerContent property. In this example it is a simple block containing only group caption. Depending on content, each group header will adjust its width automatically.
In similar way, adding a custom content to group panel is done by using the content property. For demonstration purpose all groups have the same content created by calling the generateGroupContent function.
// Create the content of group panel
var generateGroupContent = function(){
return "<div class='group-content marker-left'><a href=''>read more</a>Lorem ipsum dolor sit amet ... </div>";
}
In this case it is a single line of text followed by a hyperlink placed on the right side. The actual layout specification for group header and content is created using CSS.
Related: Horizontal Expand in Accordion jQuery
Furthermore we can add decorations to each group to enhance their appearance. For this example we have choose to add an arrow pointing from group panel to group header. This presents clearly to which group the displayed content belongs. To create this is simple, using CSS we are adding pseudo elements and applying it to each group content:
.marker-left::before
{
content: "";
border: 5px solid #fefefe;
border-color: transparent #1e4691 transparent transparent;
position: absolute;
top: 11px;
left: -11px;
}
.marker-left::after
{
content: "";
border: 5px solid #fefefe;
border-color: transparent #fefefe transparent transparent;
position: absolute;
top: 11px;
left: -10px;
}
The result is an Accordion with inline expansion of its content horizontally from left to right. We can further customize the appearance and behavior of this widget by changing the speed of animation during expanding process, setting whether groups will expand when mouse cursor hovers over their headers etc. This is all done by setting corresponding properties of Accordion:
Here is a link to a demo which shows Accordion with Inline Expansion of its content.