토글기능 구현 조언 부탁드립니다.

헐크매니아

프로필 보기 이 회원 글보기 이 회원의 댓글보기

2017-03-22 (수) 22:44:19 6,501

첨부한 그림처럼 사이트에 처음 접속하면 원하는 비율대로 right가 활성화 된 상태를 기본으로

처음 토글버튼을 누르면 right가 없어지고 그다음에는 다시 생기도록 하고싶습니다.

지금 제 소스대로 하면 디스플레이를 table,table-cell로 구현해서 left랑 right가 옆으로 놓이도록은

했는데 left 넓이가 100%니까 기본상태에서 left가 넓이를 다 먹어버리고요.

뭐 80%대 20%등등 여러가지를 해봐도 원하는대로 안나오네요.

조언좀 부탁드립니다.

Copy

<!doctype html><html><head><meta charset="utf-8"><title>무제 문서</title><style>.main {	width: 100%;	display: table;	}#left {	width: 100%;	height: 200px;	background-color: #000;	display: table-cell;}#right {	width: 250px;	height: 200px;	background-color: #3CF;	display: table-cell;}	</style></head> <body><a href="javascript:ppp(right)">토글버턴</a><script>function ppp(id)   {if(id.style.display == 'none')       {id.style.display='block';}       else{id.style.display = 'none';}   }</script><div class="main">	<div id="left">    </div>    <div id="right">    </div></div></body></html>

html5 div css