This is used for attractive ui representation on webpages. This provides different container for putting data.
Using this we can show different category of data on same page.
Situation
We want to display different category of articals on same page. But at a time user can view sigle.
Solution
- First identify source (html tag)
- Use following jqueries for implementing this task
- use jquery http://www.programmingduniya.com/common/jquery/jquery.min.js
- use jquery http://www.programmingduniya.com/common/accordion/jquery-ui.min172.js
- use jquery http://www.programmingduniya.com/common/accordion/jquery.min152.js
- use jquery http://www.programmingduniya.com/common/accordion/jquery-ui.min1821.js
- use css http://www.programmingduniya.com/common/accordion/jquery-ui.css
Steps
First we need a div which can hold all data we gave id accordion.
Ex.
<div id='accordion'></div>
Inside this div we create new menu and it's content in following manner
Ex.
<div id='accordion'>
<h3>menu name here</h3>
<div>content here</div>
</div>
Similarly we can create all menu and data panel
Ex.
<div id='accordion'>
<h3>menu1 name here</h3>
<div>content1 here</div>
<h3>menu2 name here</h3>
<div>content2 here</div>
<h3>menu3 name here</h3>
<div>content3 here</div>
</div>
Detailed programme
<html>
<head> <link
rel="stylesheet"
type="text/css"
href="http://www.programmingduniya.com/common/jquery/jquery-ui.css" />
<script
type="text/javascript"
src="http://www.programmingduniya.com/common/jquery/jquery.min.js">
</script>
<script
type="text/javascript"
src="http://www.programmingduniya.com/common/jquery/jquery-ui.min.js">
</script>
</head>
<body>
<div id="accordion">
<h3><a href="#">C-LANGUAGE</a></h3>
<div>
<p>c is a basic programming language</p>
</div>
<h3><a href="#">JQUERY</a></h3>
<div>
<p>Jquery based on javascript.</p>
</div>
<h3><a href="#">HTML</a></h3>
<div>
<p>Programming duniya is a new way to learn programming.</p>
</div>
<h3><a href="#">IMAGE EDITOR</a></h3>
<div>
<p>Programming duniya teach you.</p>
</div>
</div>
<script type="text/javascript">
$(document).ready(function() {
$("#accordion").accordion();
});
</script>
</body>
</html>
No comments:
Post a Comment