Create accordin style with jquery is very easy task. This post show this how to create it. For this we need to learn simple jquery. Accordin style is used for huge content in a little space and navigate easily. It is now used more in news and information in the webside sidebar. Now lets start to create it.
Final output of accordin style
Create a accordin style with jquery
Now start coding to create accordin style with jquery. For this we need css,html and jquery file. the sample file structure is like.
Create this file
accordin-style.html
accordin-style/ accordin-style.html style.css accordin.js title.jpg arrow-accordin.jpg
Create this file
accordin-style.html
<html> <head> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.js"></script> <script type="text/javascript" src="accordin.js"></script> <link rel="stylesheet" type="text/css" href="style.css"> </head> <body> <h1>A simple accordin</h1> <div class="click">Accordin style 1</div> <p> Create accordin style with jquery. Create accordin style with jquery. Create accordin style with jquery. Create accordin style with jquery. Create accordin style with jquery. .Create accordin style with jquery. Create accordin style with jquery. </p> <div class="click">Accordin style 2</div> <p> Create accordin style with jquery. Create accordin style with jquery. Create accordin style with jquery. Create accordin style with jquery. Create accordin style with jquery. .Create accordin style with jquery. Create accordin style with jquery. . Create accordin style with jquery. Create accordin style with jquery. Create accordin style with jquery. Create accordin style with jquery. Create accordin style with jquery. .Create accordin style with jquery. Create accordin style with jquery. </p> <div class="click">Accordin style 3</div> <p> Create accordin style with jquery. Create accordin style with jquery. Create accordin style with jquery. Create accordin style with jquery. Create accordin style with jquery. .Create accordin style with jquery. Create accordin style with jquery. </p> <div class="click">Accordin style 4</div> <p> Create accordin style with jquery. Create accordin style with jquery. Create accordin style with jquery. Create accordin style with jquery. Create accordin style with jquery. .Create accordin style with jquery. Create accordin style with jquery. </p> <div class="click">Accordin style 5</div> <p> <b>Step 1</b><br/> Create accordin style with jquery. Create accordin style with jquery. Create accordin style with jquery. Create accordin style with jquery. Create accordin style with jquery. .Create accordin style with jquery. Create accordin style with jquery. . <br/><br/> <b>Step 2</b><br/> Create accordin style with jquery. Create accordin style with jquery. Create accordin style with jquery. Create accordin style with jquery. Create accordin style with jquery. .Create accordin style with jquery. Create accordin style with jquery. </p> <div class="click">Accordin style 6</div> <p> Create accordin style with jquery. Create accordin style with jquery. Create accordin style with jquery. Create accordin style with jquery. Create accordin style with jquery. .Create accordin style with jquery. Create accordin style with jquery. </p> </body> </html>accordin.js
$(document).ready(function(){
$(".click:first").addClass("active");
$("p:first").css("display","block");
$(".click p:not(:first)").hide();
$(".click").click(function(){
$(this).next("P").slideToggle("slow").siblings("p:visible").slideUp("slow");
$(this).toggleClass("active");
$(this).siblings(".click").removeClass("active");
});
});
style.css
body{
margin:0 auto;
width:600px;
background:url("title.jpg");
}
h1{
color:white;
padding:10px;
}
.click{
display:block;
color:#4c4c4c;
padding:2%;
margin-top:1px;
background: white url("arrow-accordin.jpg") no-repeat right 10px;
cursor:pointer;
font-weight:bold;
}
p{
display:block;
padding:2%;
//background-color:#f1f1f1;
background:#ABD9BA;
margin:0;
display:none;
color:dimgray;
border-top:5px solid green;
}
.active{
background: white url("arrow-accordin.jpg") no-repeat right -40px;
display:block;
}
No comments:
Post a Comment