折りたたみ/フォントのすばらしいアイコンの表を開く

-1

現在、私のラベルは折りたたみ可能で、テーブルを折りたたんでいます。私は、ラベルや見出しにフォントのすばらしいアイコンを追加したいと思います。テーブルオープンの場合はキャレット - ダウン、クローズまたはテーブルの場合はキャレット - 右。これはクリック時に発生します。折りたたみ/フォントのすばらしいアイコンの表を開く

出典

2016-07-27 Priyanka Pachori

私はこれがあなたの問題

jQueryの

$(document).ready(function(){ 
    $('.collapse').hide(); 
    $('.content').hide(); 
    $('.expand, .collapse').bind('click',function(){ 
    $('.collapse').toggle(); 
    $('.expand').toggle(); 
    $('.content').slideToggle(); 
    }); 
});

HTML

解決することができ、ここで https://jsfiddle.net/gjk3zepd/2/

フィドルを作成しました

<a href="#" class="expand"><span class="glyphicon glyphicon-chevron-right"></span></a> 

<a href="#" class="collapse"><span class="glyphicon glyphicon-chevron-down"></span></a> 

<div class="content"> 
Div Content 
</div>

出典

2016-07-27 13:27:17

私はあなたが1つのアイコンを使用してトグルを達成しようとしていると思います。このコードは役に立つかもしれません。

$("a").click(function(){ 
 
    if($("div.content").is(':hidden')){ 
 
    $("div.content").show(); 
 
    $(this).addClass('toggle'); 
 
    }else{ 
 
    $(this).removeClass('toggle'); 
 
}  
 
});

a i.fa-angle-down{display:none;} 
 
a i.fa-angle-up{display:block;} 
 
a.toggle i.fa-angle-down{display:block;} 
 
a.toggle i.fa-angle-up{display:none;}

<!DOCTYPE html> 
 
<html> 
 
<head> 
 
<meta charset="utf-8"> 
 
<title>Toggle</title> 
 
    
 
</head> 
 
    <body> 
 
    <a class="toggle"> 
 
    <i class="fa fa-angle-down"></i> 
 
    <i class="fa fa-angle-up"></i> 
 
</a> 
 
</body> 
 
</html>

出典

2016-09-10 11:05:36 Sachindra

折りたたみ/フォントのすばらしいアイコンの表を開く

答えて

関連する問題