PHP Developers Network

A community of PHP developers offering assistance, advice, discussion, and friendship.
 
Loading
It is currently Tue Sep 29, 2020 2:50 pm

All times are UTC - 5 hours




Post new topic Reply to topic  [ 1 post ] 
Author Message
PostPosted: Sun Jun 01, 2014 1:24 pm 
Offline
Forum Newbie

Joined: Sat Jan 11, 2014 9:10 am
Posts: 14
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:
Syntax: [ Download ] [ Hide ]
<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/d ... 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/d ... 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.

Syntax: [ Download ] [ Hide ]
<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-aw ... eot?#iefix) format('eot'),
        url(https://netdna.bootstrapcdn.com/font-aw ... bfont.woff) format('woff'),
        url(https://netdna.bootstrapcdn.com/font-aw ... ebfont.ttf) format('truetype'),
    font-family:FontAwesome;
        url(https://netdna.bootstrapcdn.com/font-aw ... ontAwesome) 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.


Top
 Profile  
 
Display posts from previous:  Sort by  
Post new topic Reply to topic  [ 1 post ] 

All times are UTC - 5 hours


Who is online

Users browsing this forum: No registered users and 9 guests


You cannot post new topics in this forum
You cannot reply to topics in this forum
You cannot edit your posts in this forum
You cannot delete your posts in this forum
You cannot post attachments in this forum

Jump to:  
Powered by phpBB® Forum Software © phpBB Group