Adding content icon for toggle effect
Posted: Sun Jun 01, 2014 1:24 pm
Hello all,
I am quite new in the world of css and js So, if some could please help me out with code below.
I am working on js toggle effect and it works perfectly fine with icon(image).
Below is the code for the same:
Since in the above code you can see that i have used images. But the question raised that I need content icon (using font awesome) in-spite of images. Below is the code using font awesome as content images.But it not working fine.
If some one could please help me out with this or can give any suggestion.
I am quite new in the world of css and js So, if some could please help me out with code below.
I am working on js toggle effect and it works perfectly fine with icon(image).
Below is the code for the same:
Code: Select all
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$('.ahref').click(function() {
$(this).toggleClass('hidden'); //change the status of the link
$($(this).data('div')).slideToggle(500); //toggle the visibility
});
});
</script>
<style type="text/css">
.ahref { background: url(http://cdn1.iconfinder.com/data/icons/diagona/icon/16/130.png) no-repeat left top; width: 16px; height: 16px; display:inline-block; cursor:pointer; }
.hidden { background: url(http://cdn1.iconfinder.com/data/icons/diagona/icon/16/129.png) no-repeat left top; }
</style>
<a class="ahref" data-div=".box1"></a>
<div class="box1">1</div>
<div class="box2" style="float:right;">2</div>
<div class="box3">3</div>
<div class="box3">3</div>
Code: Select all
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$('.ahref').click(function() {
$(this).toggleClass('hidden'); //change the status of the link
$($(this).data('div')).slideToggle(500); //toggle the visibility
});
});
</script>
<style type="text/css">
@font-face{
src:url(https://netdna.bootstrapcdn.com/font-awesome/2.0/font//fontawesome-webfont.eot?#iefix) format('eot'),
url(https://netdna.bootstrapcdn.com/font-awesome/2.0/font//fontawesome-webfont.woff) format('woff'),
url(https://netdna.bootstrapcdn.com/font-awesome/2.0/font//fontawesome-webfont.ttf) format('truetype'),
font-family:FontAwesome;
url(https://netdna.bootstrapcdn.com/font-awesome/2.0/font//fontawesome-webfont.svg#FontAwesome) format('svg');
font-weight:400;font-style:normal;}
.fa {
display: inline-block;
font-family: FontAwesome;
font-style: normal;
font-weight: normal;
line-height: 1;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
.fa-chevron-up:before {
content: "\f077";
}
</style>
<i class="ahref ace-icon fa fa-chevron-up " data-div=".box1"></i>
<div class="box1">1</div>
<div class="box2" style="float:right;">2</div>
<div class="box3">3</div>
<div class="box3">3</div>