jQuery 관련 팁을 공유하는 곳입니다. [가입을 하셔야 다운로드가 가능합니다.]
  • 웹미니 한줄 전광판 영역 입니다.
글 수 22

0

조회 수 : 24 신고 : 0

profile
작성자 : title: [ani]깜빡이는 표정빽짱구
포인트 : 57047 | 레벨 : 25
미리보기 : https://www.webmini.net/toggle 

html

 

<div class="view_reply">

<div class="reply_1dep">

리스트 내용1 <button class="bt_more">더보기</button>

</div>

<div class="wrap_reply_2dep">

리스트 내용2 버튼 눌렀을때 보여질 내용

</div>

</div>

<div class="view_reply">

<div class="reply_1dep">

리스트 내용2 <button class="bt_more">더보기</button>

</div>

<div class="wrap_reply_2dep">

리스트 내용2 버튼 눌렀을때 보여질 내용

</div>

</div>

 

css

 

.view_reply{padding:10px 15px;border-bottom:1px solid #000}

.view_reply .reply_1dep{padding:8px 0;font-size:13px}

.view_reply .bt_more{position:relative;top:-1px;left:5px;padding:5px 8px;border:1px solid #000;border-radius:3px;background:#444;color:#fff;cursor:pointer}

 

.view_reply .wrap_reply_2dep{padding:15px 0;border-top:1px dotted #ddd;color:#999;font-size:13px}

 

script

 

$(document).ready(function(){

$('.view_reply .wrap_reply_2dep').hide();

$('.reply_1dep .bt_more').click(function(){

if ($(this).hasClass('on')){

$(this).removeClass('on');

$(this).parent().parent().find('.wrap_reply_2dep').slideUp();

}else{

$(this).addClass('on');

$(this).parent().parent().find('.wrap_reply_2dep').slideDown();

}

});

});

태그
profile 글쓴이 빽짱구

단점이 없는 사람은 장점도 거의 없다 - 에이브러햄 링컨

엮인글 :
https://www.webmini.net/jquery/632332/819/trackback
소중한 댓글 부탁드립니다.
추천수 10단위당 메달이 1개씩 노출되고, 추천수에 따라 배경색이 변하며, 일정수의 추천수를 받을시 BEST 아이콘이 붙게됩니다.
추천수에 따른 배경색 보기 본문으로 바로가기
  • 추천수 50개이상
  • 추천수 30개이상
  • 추천수 20개이상
  • 추천수 10개이상
  • 추천수 3개이상
닫기

첫번째 댓글을 남겨주세요!

List of Articles
번호 제목 글쓴이 날짜 추천 수 조회 수
22 ajax로 호출시 jquery 실행이 안될때 title: [ani]깜빡이는 표정빽짱구 2019-01-04   11
21 jquery 탭메뉴 title: [ani]깜빡이는 표정빽짱구 2019-01-02   15
20 가로사이즈 구하기 title: [ani]깜빡이는 표정빽짱구 2018-11-06   16
19 jquery - 이미지 체크박스, 라디오 버튼 title: [ani]깜빡이는 표정빽짱구 2018-10-16   45
18 본문글 집중모드 효과 file [1] title: [ani]깜빡이는 표정빽짱구 2018-10-09   125
17 스크롤 고정형 퀵배너 title: [ani]깜빡이는 표정빽짱구 2018-09-07   42
16 버튼 클릭시 원하는 곳으로 부드럽게 이동 title: [ani]깜빡이는 표정빽짱구 2018-09-07   51
15 jquery 토글 기능 title: [ani]깜빡이는 표정빽짱구 2018-09-06   24
14 해당 영역 높이값 자동으로 가져오기 title: [ani]깜빡이는 표정빽짱구 2016-04-27   158
13 해상도별로 CSS호출하기 title: [ani]깜빡이는 표정빽짱구 2015-10-14   555
12 iscroll 사용시 동적일때 문제 title: [ani]깜빡이는 표정빽짱구 2014-02-20   3544
11 [스크랩] jQuery 팁 & 튜토리얼 title: 새싹사뎅이 2014-01-14   2468
10 제이쿼리 모바일(jquery mobile) 샘플사이트 및 데모 title: [ani]깜빡이는 표정빽짱구 2013-01-29 1 6834
9 버튼이나 텍스트 링크 클릭시 원하는곳으로 부드럽게 이동하기 file [1] title: [ani]깜빡이는 표정빽짱구 2012-10-22 2 5180
8 제이쿼리 및 CSS3,HTML5 관련 튜토리얼입니다. title: [ani]방울UI 2012-10-11   3280
7 jQuery 로 레이어 드래그 하기 title: [ani]깜빡이는 표정빽짱구 2012-09-07   3365
6 jQuery로 파일첨부버튼 이미지로 꾸미기 file title: [ani]깜빡이는 표정빽짱구 2012-09-07   4427
5 jQuery 제이쿼리로 셀렉트 박스 꾸미기 file title: [ani]깜빡이는 표정빽짱구 2012-09-06 1 5525
4 jQuery 부드러운 위로가기 탑(top) 버튼 효과 file [1] title: [ani]깜빡이는 표정빽짱구 2012-08-30   6600
3 jQuery 종류별 효과 모음 title: [ani]깜빡이는 표정빽짱구 2012-03-02 1 7328