달력

32024  이전 다음

  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24
  • 25
  • 26
  • 27
  • 28
  • 29
  • 30
  • 31

'jquery toggle'에 해당되는 글 1건

  1. 2017.11.23 특정 영역(DIV) 여닫기 기능 Toggle

<script type="text/javascript">

$(function() {

$('#ma-search-toggle').click(function(e) {

e.preventDefault();

var $toggle =  $('div.box > .box-comments');

if ($toggle.is(':visible')) {

$(this).switchClass('fa-chevron-circle-up', 'fa-chevron-circle-down'); //클래스 변경

$('div.box > .box-comments').slideUp();  // 슬라이드 업 [닫힘]

} else {

$(this).switchClass('fa-chevron-circle-down', 'fa-chevron-circle-up'); //클래스 변경

$('div.box > .box-comments').slideDown(); // 슬라이드 업 [열림]

};

});

});

</script>


<i class="fa fa-chevron-circle-up" id="ma-search-toggle" style="cursor: pointer;"></i>


<div class="box-body box-comments" style="padding-bottom: 0">

닫히고 열리고 

</div>

'Programing > JQUERY' 카테고리의 다른 글

SCRIPT 에서 APPEND 한 이벤트 Binding 처리  (0) 2020.03.12
DatePicker 기본 설정  (0) 2017.05.25
Posted by 한설림
|