Adding content icon for toggle effect

[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:

 

 

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

 

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

[fastsol]

You have the snytax messed up in the css.  Make sure your urls are correct if you copy the code below since the forum shortens them.

@font-face{
    font-family:FontAwesome;
    src:url(https://netdna.boots...font.eot?) format('eot'),
url(https://netdna.boots...me-webfont.woff) format('woff'),
url(https://netdna.boots...ome-webfont.ttf) format('truetype'),
url(https://netdna.boots...svg#FontAwesome) format('svg');
    font-weight:400;font-style:normal;}