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>