테스트 사이트 - 개발 중인 베타 버전입니다

div 컨텐츠 열기 / 닫기 구현 채택완료

살려주세여 4년 전 조회 1,954

사진처럼 리스트가 있구요 닫기버튼을 누르면 밑에있는 리스트들이 닫혀지고

리스트가 닫혀지면 내려간 상태에서 열기버튼을 누르면 다시 리스트가 올라오는 것을 구현하고 싶습니다

리스트 갯수가 많아지면 오른쪽에서 스크롤도 구현하고 싶은데 도와주시면 감사하겠습니다

</p>

<pre>
<code><div class="fix_inko" style="display: none;">
	<a href="#none" class="cmpr_close2 gtm-tracking"><span>열기</span></a>
</div>

<div class="fix_inko">
	<a href="#none" class="cmpr_close2 on gtm-tracking"><span>닫기</span></a>

	<table class="inko_list" id="table"> 
		<colgroup>
			<col width="8%">
			<col width="22%">
			<col width="47%">
			<col width="2.5%">
			<col width="2.5%">
			<col width="10%">
			<col width="8%">
			<col width="">
		</colgroup>
		<thead>
			<tr>
				<th>접수일자</th>
				<th>사이트명</th>	
				<th>유지보수 내역</th>	
				<th>개발</th>	
				<th>디자인</th>	
				<th>비고</th>	
				<th>완료일자</th>
				<th>관리</th>
			</tr>
		</thead>
		<tbody>
		<?	while ($row = sql_fetch_array($result)){?>
				<form name = "smpList<?=$row['smp_id']?>" id = "smpList<?=$row['smp_id']?>" method = "post" action = "./inkorea_action.php" autocomplete="off">
					<input type="hidden" name="Operation" value="EDIT">
					<input type="hidden" name="work_p" id="work_p<?=$row['smp_id']?>" value="<?=$row['work_p']?>">
					<input type="hidden" name="work_d" id="work_d<?=$row['smp_id']?>" value="<?=$row['work_d']?>">
					<input type="hidden" name="smp_id" value="<?=$row['smp_id']?>"> 
			<tr>
				<td><?=$row['date'] ?></td>
				<td><?=$row['site_name']?></td> 
				<td><?=$row['content']?></td>
				
				<td><?if($row['work_p']=="N"){?><a  href="javascript:onclick1(<?=$row['smp_id']?>,'Y');"  class="btn blueButton">작업완료</a>
					<?}else{?>
					작업완료
					<?}?>
					</td>
				
				<td><?if($row['work_d']=="N"){?><a  href="javascript:onclick2(<?=$row['smp_id']?>,'Y');"  class="btn blueButton">작업완료</a>
					<?}else{?>
					작업완료
					<?}?>
					</td>
				<td><textarea name="memo" type="text" class="txt frm_input" style="width:100%;line-height:100%;" rows="8"> <?=$row['memo']?></textarea></td>
				<td><?if($row['work_d']=="Y" && $row['work_p']=="Y"){?><?=$row['complet_date']?><?}else{?>-<?}?></td>
				<td><a  href="javascript:updateArticle(<?=$row['smp_id']?>);"  class="btn blueButton">수정</a></td>	
			</tr>
		</form>
	<?}?>
		</tbody>
	</table>
</div></code></pre>

<p>

소스 올립니다 자그마한 웹에이전시 신입이라 잘 몰라서 구현하고 싶은 내용을 최대한 구체적으로 

적었습니다 도와주시면 감사하겠습니다 

댓글을 작성하려면 로그인이 필요합니다.

답변 3개

채택된 답변
+20 포인트
cuwaaang
4년 전

제일간단한 방법

 

자바스크립트나 제이쿼리로 클릭 이벤트만들어서

밑에 div 에 클래스를 추가,삭제 처리하셈

 

그리고 css에서 div height 값을 기존높이랑 닫기시 0으로 하고 

부드럽게하기위해 transition 시간 추가.

로그인 후 평가할 수 있습니다

답변에 대한 댓글 1개

살려주세여
4년 전
감사합니다^^

댓글을 작성하려면 로그인이 필요합니다.

m
4년 전

jquery toggle 찾아보세요!

로그인 후 평가할 수 있습니다

답변에 대한 댓글 1개

살려주세여
4년 전
네 감사합니다~

댓글을 작성하려면 로그인이 필요합니다.

s
sinbi Expert
4년 전

jquery, selector, click event, show, hide, toggle 키워드로 검색해 공부해 보세요.

로그인 후 평가할 수 있습니다

답변에 대한 댓글 1개

살려주세여
4년 전
답변 고맙습니다!

댓글을 작성하려면 로그인이 필요합니다.

답변을 작성하려면 로그인이 필요합니다.

로그인