Welcome to Designers Dairy blog here i have posted how to Up and Down the arrow On clicking
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<style type="text/css">
.refine-arrow-up
{
background: url(refine-up.jpg) no-repeat 0 0;
display:block;
width:25px;
}
.refine-arrow-down a
{
color:red;
}
.refine-arrow-up a
{
color:orange;
}
a:hover
{
color:green;
}
.refine-arrow-down
{
background: url(refine-down.jpg) no-repeat 0 0;
display:block;
width:25px;
}
.red
{
color:red;
}
a
{
color:#ccc;
margin-left:30px;
}
</style>
<script type="text/javascript">
$(document).ready(function() {
$("#refine-description").click(function()
{
if ($(this).hasClass('refine-arrow-up'))
{
$(this).removeClass('refine-arrow-up');
$(this).addClass('refine-arrow-down');
}
else if($(this).hasClass('refine-arrow-down'))
{
$(this).removeClass('refine-arrow-down');
$(this).addClass('refine-arrow-up');
}
});
});
</script>
</head>
<body>
<div id="refine-description" class="refine-arrow-down">
<a href="#"> Refine </a>
</div>
</body>
</html>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<style type="text/css">
.refine-arrow-up
{
background: url(refine-up.jpg) no-repeat 0 0;
display:block;
width:25px;
}
.refine-arrow-down a
{
color:red;
}
.refine-arrow-up a
{
color:orange;
}
a:hover
{
color:green;
}
.refine-arrow-down
{
background: url(refine-down.jpg) no-repeat 0 0;
display:block;
width:25px;
}
.red
{
color:red;
}
a
{
color:#ccc;
margin-left:30px;
}
</style>
<script type="text/javascript">
$(document).ready(function() {
$("#refine-description").click(function()
{
if ($(this).hasClass('refine-arrow-up'))
{
$(this).removeClass('refine-arrow-up');
$(this).addClass('refine-arrow-down');
}
else if($(this).hasClass('refine-arrow-down'))
{
$(this).removeClass('refine-arrow-down');
$(this).addClass('refine-arrow-up');
}
});
});
</script>
</head>
<body>
<div id="refine-description" class="refine-arrow-down">
<a href="#"> Refine </a>
</div>
</body>
</html>
