How to implement jQuery accordion
posted on: 2010-04-19 18:19:04
In this tutorial I will familiarize you with the jQuery accordion widget. This widget might not be as useless as it first appears. Firstly I can think of many occasions in the last year where I have been asked to implement similar functionality, and also I have seen many instances of people needlessly doing things the hard way and writing their own javascript to achieve the same result.
The jQuery accordion is a genuine time saver in the way that you can easily implement it into pre existing code and replacing the hide/show mechanism you already have. Without having to change tonnes of html.
Product Information
Product description goes here.... Immerse yourself in the experience with lots of features like HDMI input, powerful front stereo audio, USB port and A fast 5ms response time.
Features
Product Features:
- 16:9 Widescreen
- Full HD (1080P)
- 1920x1080 Resolution
- 12000:1 Dynamic Contrast Ratio
- 300cd/m2 Brightness
- SmartResponse 2ms (Gray to Gray)
- 5ms Response Time (Typical)
- VGA DVI-D HDMI (HDCP) USB2.0
- Tilt Stand
- 2x2W Speakers
- 3 Year Onsite SWAP
- Gloss Black
Options available
Colour:
Delivery:
Here is the example code below. Obviously you can can just view source on the contents of this page for the tutorial code. But I thought the below would just be a little easier on the eye.
<script type="text/javascript" src="http://someplace/js/ui/jquery.ui.core.js"></script>
<script type="text/javascript" src="http://someplace/js/ui/jquery.ui.widget.js"></script>
<script type="text/javascript" src="http://someplace/js/ui/jquery.ui.accordion.js"></script>
<script type="text/javascript">
$(function() {
$("#accordion_basic").accordion({
autoHeight: false});
});
</script>
<div id="accordion_basic">
<h3><a href="#"> Tab 1 </a></h3>
<div>
content
</div>
<h3><a href="#"> Tab 2 </a></h3>
<div>
content
</div>
</div>