accordian with JQuery click, slideUp and slideDown
I want to disply 3 divs on a page (accordian with JQuery click, slideUp
and slideDown functions)
But I want one of the divs to be "open" when page loads.
Here is my code,
$(document).ready(function() {
$('.title').click(function() {
$('.title').removeClass('on');
$('.content').slideUp('normal');
if($(this).next().is(':hidden') == true) {
$(this).addClass('on');
$(this).next().slideDown('normal');
}
});
});
css,
.title {
padding-left:15px;
height:17px;
background: url(images/arrow-toggle.png) 0 3px no-repeat !important;
cursor:pointer;
margin-bottom:10px;
color:#104675;
}
.on {
background: url(images/arrow-toggle.png) 0 -12px no-repeat !important;
}
.content {
display:none;
background-color:#f4f2f3;
border: #CCCCCC 1px solid;
padding: 10px;
margin-bottom:10px;
}
--------
HTML,
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link rel="stylesheet" href="css/dropdownwitharrows.css" type="text/css"
media="screen" />
<script
src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"
type="text/javascript"></script>
<script src="js/dropdownwitharrows.js" type="text/javascript"></script>
</head>
<body>
Header One
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam turpis
urna, tristique quis convallis nec, dapibus sed velit. Aenean sapien eros,
luctus a aliquet ut, consectetur eget nunc. Sed ut odio mollis mauris
pulvinar scelerisque. Etiam semper dolor at ante venenatis euismod. Ut
tempus massa vel nisl ullamcorper interdum. Mauris pretium venenatis
tellus ut lacinia. Quisque cursus dapibus tellus, ac scelerisque lacus
placerat sed. Proin tristique dignissim faucibus. Proin vestibulum ligula
non urna varius volutpat. Etiam aliquam malesuada aliquam. Donec commodo
tortor a erat luctus lobortis vitae ut augue. Integer eleifend ullamcorper
tempus.
No comments:
Post a Comment