www.webdeveloper.com
Results 1 to 2 of 2

Thread: Adding content icon for toggle effect

  1. #1
    Join Date
    Jan 2014
    Posts
    10

    Question Adding content icon for toggle effect

    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:

    HTML Code:
    <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.

    HTML Code:
    <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.

  2. #2
    Join Date
    Nov 2010
    Posts
    1,084
    I think you may need to include the style sheet.

    Your markup looks weird, too - I know it's not complete, but it's not possible to have valid markup with <style> tags in the same section as <divs>

    you may want to toggle the class so your arrow changes between down and up...
    Code:
    <!doctype html>
    <html lang="en">
    <head>
      <meta charset="utf-8">
      <title></title>
      <link href="http://netdna.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.css" rel="stylesheet">
    <style type="text/css">
    
    </style>
    
    </head>
    <body>
    <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
    		$(this).toggleClass("fa-chevron-up  fa-chevron-down");
    	});
    });
    </script>
    <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>  
    </body>
    </html>

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Tags for this Thread

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
HTML5 Development Center



Recent Articles