Adding content icon for toggle effect

HTML, CSS and anything else that deals with client side capabilities.

Moderator: General Moderators

Post Reply
jackgoddy123
Forum Newbie
Posts: 14
Joined: Sat Jan 11, 2014 8:10 am

Adding content icon for toggle effect

Post by jackgoddy123 »

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:

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>     
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.

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>                 
If some one could please help me out with this or can give any suggestion.
Post Reply