Adding an interactive accordion widget to your ecommerce site can provide a great design feature that conveys professionalism and makes your content more readable.
There are plenty of instances in website design when we would like to have a lot of content on a page, but, unless you are creating articles or blog posts, too much text causes the pages to scroll, which makes the content less readable.
As an example, imagine that you have a product detail page with a product description, product image, 20 or more customer reviews, washing and care instructions, inventory availability, related products, and shipping options. That can be a lot of text on a page type (i.e. a contact page or even a product detail page) that does not usually scroll well. So how do you manage all of that copy?
One solution is to use what designers call an accordion, which simultaneously shows some bit of content while hiding other content. You can think of it as a vertical tab.
In this edition of “Web Design Tips,” I am going to show you how to very quickly implement an accordion widget based on the jQuery library.
Video: Implementing a jQuery Accordion Widget
Step 1: Download
The jQuery user interface accordion widget is a simple-to-use, ready to implement solution for adding the aforementioned interaction and readability to your website. To get the accordion working, you are going to need to download three files from the jQuery site, including the jQuery library, jQuery UI core, and the jQuery UI effects core.
You can get all of these files from the jQuery UI download page. For this purpose, you only need to select three checkboxes–UI Core, Accordion, and Effects Core—but if you plan to use other jQuery UI effects or widgets on your site, you may want to selection more options before downloading.
Step 2: Add the jQuery UI Files to Your Site’s Directory
When you download the files you receive a zip file that includes the JavaScript files, some CSS, and even an HTML page. We are going to move this into our site hierarchy.
Step 3: Link the jQuery Files and User Interface CSS
Just add the code below to the <head> portion of your HTML document.
<code><link type="text/css" href="css/smoothness/jquery-ui-1.7.2.custom.css" rel="stylesheet"/> <script type="text/javascript" src="js/jquery-1.3.2.min.js"></script> <script type="text/javascript" src="js/jquery-ui-1.7.2.custom.min.js"></script> </code>
Step 4: Add the Accordion Function
Now add this accordion function:
$(function(){
// Accordion
$("#accordion").accordion({ header: "h3" });
//hover states on the static widgets
$('#dialog_link, ul#icons li').hover(
function() { $(this).addClass('ui-state-hover'); },
function() { $(this).removeClass('ui-state-hover'); }
);
});
Step 5: Add Any Additional CSS
The HTML included in the jQuery UI download has an internal CSS to supplement the external styles. As you customize the accordion widget you may want to integrate these styles into your main CSS. Regardless of how you implement these styles, here they are.
<code> /*demo page css*/
.demoHeaders { margin-top: 2em; }
#dialog_link {padding: .4em 1em .4em 20px;text-decoration: none;position: relative;}
#dialog_link span.ui-icon {margin: 0 5px 0 0;position: absolute;left: .2em;top: 50%;margin-top: -8px;}
ul#icons {margin: 0; padding: 0;}
ul#icons li {margin: 2px; position: relative; padding: 4px 0; cursor: pointer; float: left; list-style: none;}
ul#icons span.ui-icon {float: left; margin: 0 4px;}
</code>
Step 6: Add The Accordion <div> And Its Children
Next we need to create the HTML that the accordion widget will modify. The <h3> tags represent the content title for each layer in the accordion.
<code> <div id="accordion">
<div>
<h3><a href="#">Flash Rebirth #3</a></h3>
<div><img src="images/flash.png" alt="Flash Rebirth" /></div>
</div>
<div>
<h3><a href="#">Shazam!</a></h3>
<div><img src="images/shazam.png" alt="Shazam!" /></div>
</div>
<div>
<h3><a href="#">Superman, Action Comics</a></h3>
<div><img src="images/superman.png" alt="Superman, Action Comics" /></div>
</div>
</div>
</code>
Step 7: Add Your Content
Now just add your titles and content into each layer of the accordion, and you have a great jQuery UI widget that helps make your site easier to read and more interactive.
I have included all of the code from the sample page in the demonstration below. Be sure to watch the video to see just how I implemented this widget.
<code><head>
<title>Practical eCommerce Mobile Commerce CSS Demonstration</title>
<link href="style.css" rel="stylesheet" type="text/css" media="screen" />
<link href="handheld.css" rel="stylesheet" type="text/css" media="handheld" />
<link type="text/css" href="css/smoothness/jquery-ui-1.7.2.custom.css" rel="stylesheet" />
<script type="text/javascript" src="js/jquery-1.3.2.min.js"></script>
<script type="text/javascript" src="js/jquery-ui-1.7.2.custom.min.js"></script>
<script type="text/javascript">
$(function(){
// Accordion
$("#accordion").accordion({ header: "h3" });
//hover states on the static widgets
$('#dialog_link, ul#icons li').hover(
function() { $(this).addClass('ui-state-hover'); },
function() { $(this).removeClass('ui-state-hover'); }
);
});
</script>
<style type="text/css">
/*demo page css*/
.demoHeaders { margin-top: 2em; }
#dialog_link {padding: .4em 1em .4em 20px;text-decoration: none;position: relative;}
#dialog_link span.ui-icon {margin: 0 5px 0 0;position: absolute;left: .2em;top: 50%;margin-top: -8px;}
ul#icons {margin: 0; padding: 0;}
ul#icons li {margin: 2px; position: relative; padding: 4px 0; cursor: pointer; float: left; list-style: none;}
ul#icons span.ui-icon {float: left; margin: 0 4px;}
</style>
</head>
<body>
<div id="wrapper">
<div id="access">
<a href="">Skip to content</a>
<a href="">Skip to search</a>
</div><!--end access-->
<div id="header">
<a href=""><img src="images/logo.png" alt="Nashville Comics" /></a>
<div id="searchbox">
<input id="search" class="input-text" type="text" value="" name=""/>
<input type="image" alt="Search" src="images/search.png"/>
</div><!--end search-->
<div id="top-nav">
<ul>
<li><a href="">Marvel</a></li>
<li><a href="">DC</a></li>
<li><a href="">Darkhorse</a></li>
<li><a href="">Image</a></li>
<li><a href="">Verdigo</a></li>
<li><a href="">Minx</a></li>
<li><a href="">Zuda</a></li>
<li><a href="">Space</a></li>
<li><a href="">PeC</a></li>
</ul>
</div><!--end top-nav-->
</div><!--end header-->
<div id="content">
<div id="hero-section">
<div id="accordion">
<div>
<h3><a href="#">Flash Rebirth #3</a></h3>
<div><img src="images/flash.png" alt="Flash Rebirth" /></div>
</div>
<div>
<h3><a href="#">Shazam!</a></h3>
<div><img src="images/shazam.png" alt="Shazam!" /></div>
</div>
<div>
<h3><a href="#">Superman, Action Comics</a></h3>
<div><img src="images/superman.png" alt="Superman, Action Comics" /></div>
</div>
</div>
</div><!--end hero-section-->
<ul>
<li id="product1">
<img src="images/ac11.png" />
<h3>Action Comics #11</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis facliisis. </p>
<span id="price">$11,990.00</span>
<button class="form-button" onclick="setLocation('')">
<span>Add to Cart</span>
</button>
</li><!--end product1-->
<li id="product2">
<img src="images/ac27.png" />
<h3>Action Comics #27</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis facliisis. </p>
<span id="price">$9,990.00</span>
<button class="form-button" onclick="setLocation('')">
<span>Add to Cart</span>
</button>
</li><!--end product2-->
<li id="product3">
<img src="images/ac1.png" />
<h3>Action Comics #1</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis facliisis. </p>
<span id="price">$2,102,990.00</span>
<button class="form-button" onclick="setLocation('')">
<span>Add to Cart</span>
</button>
</li><!--end product3-->
<li id="product4">
<img src="images/ac2.png" />
<h3>Action Comics #2</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis facliisis. </p>
<span id="price">$898,990.00</span>
<button class="form-button" onclick="setLocation('')">
<span>Add to Cart</span>
</button>
</li><!--end product4-->
</ul>
</div><!--end content-->
<div id="footer">
<p>Copyright 2009 Practical eCommerce, AKA Nashville Comics, All Rights Reserved</p>
<ul>
<li><a href="">Marvel</a></li>
<li><a href="">DC</a></li>
<li><a href="">Darkhorse</a></li>
<li><a href="">Image</a></li>
<li><a href="">Verdigo</a></li>
<li><a href="">Minx</a></li>
<li><a href="">Zuda</a></li>
<li><a href="">Space</a></li>
<li><a href="">PeC</a></li>
</ul>
<ul>
<li><a href="">Home</a></li>
<li><a href="">About</a></li>
<li><a href="">Privacy</a></li>
<li><a href="">Customer Service</a></li>
</ul>
</div><!--end footer-->
</div><!--end wrapper-->
</body>
</html>
</code>
SEO Takeaways from SGE's Partial Rollout
ChatGPT vs. Gemini for SEO Tasks
Google Ad Updates Reflect New SERPs
BNPL Competition Drives Wins for Merchants
New Ecommerce Tools: April 2, 2024
5 Content Marketing Ideas for May 2024
The Profitable Seller: Mastering Amazon FBA
