열고 닫을수 있는 하단 질문하기 배너 관련
본문
하단에 배너가 있는데요 중앙에 열고 닫고를 할수있는 버튼을 만들었습니다.
그런데 최상단에서만 닫히고 그것도 내리면 다시 열리는데요 닫기버튼을 누르면 계속 닫혀있고
열기를 눌렀을때만 올라올수 있을까요?
전체파일 소스를 올리겟습니다.
많은 도움 부탁드립니다.
감사합니다.
<style>
.bottom_quick_wrap .toggle_btn {
position: absolute;
left: 50%;
bottom: 100%;
padding: 0;
width: 55px;
height: 35px;
margin-left: -60px;
line-height: 27px;
background: transparent;
border: 0;
cursor: pointer;
outline: none;
background-image: url('theme/sample137/img/open.png');
}
.bottom_quick_wrap.pc_only {
transform: translatey(100%);
}
.bottom_quick_wrap.pc_only.show {
transform: translatey(0%);
}
</style>
<div class="bottom_quick_wrap pc_only show">
<input type="button" class="toggle_btn" style="background-image: url('theme/sample137/img/close.png');"/>
<div class="inqInner">
<div class="Left">
<p class="stxt">평일 공휴일 주 야간 24시간 상담전화</p>
<a href="">
<p class="tel">055. 586. 3325</p>
</a> </div>
<div class="Right">
<div class="checkbox">
<p class="txt">무료상담<br>신청하기</p>
<form name="fcounsel" id="fcounsel" action="<?= G5_THEME_URL ?>/tl_counsel/apply_x.php" method="post">
<input type="hidden" name="ci_id" value="3">
<!-- <input type="hidden" name="co_status" value="1"> -->
<input type="checkbox" value="Y" name="pricheck" id="pricheck" required class="per_prcie" required checked>
<label for="pricheck">
<p class="check">개인정보수집및<br>이용,제공 동의 </p>
</label>
</div><br>
<!--<form>-->
<div class="inputwrap">
<table class="tbl-stat2" id="tbl-rank">
<caption>
</caption>
<colgroup>
<col style="width: 33.333333%;">
<col style="width: 33.333333%;">
<col style="width: 33.333333%;">
</colgroup>
<thead>
<tr>
<th align="center"> <input type="text" class="name" name="co_name" id="name" value="" autocomplete="off" required="" placeholder="이름"></th>
<th align="center"><input type="text" class="tel" name="co_hp" id="tel" value="" autocomplete="off" required="" placeholder="전화번호"></th>
<th rowspan="2" align="center"></th>
</tr>
</thead>
<tbody>
<tr>
<td scope="col"><input type="text" class="address" name="co_text_1" id="address" value="" autocomplete="off" required="" placeholder="주소"></td>
<td scope="col"> <input type="text" class="subject" name="co_text_2" id="subject" value="" autocomplete="off" required="" placeholder="문의내용"></td>
<td scope="col"><button class="send" onclick="_criteo_conv1_click();">
<p>무료상담신청하기</p>
</button></td>
</tr>
</tbody>
</table>
</div>
</form>
</div>
</div>
</div>
<script>
$('.toggle_btn').click(
function(){
if($('.bottom_quick_wrap.pc_only').hasClass("show") === true) {
$('.toggle_btn').css("background-image", "url('theme/sample137/img/open.png')");
}
else {
$('.toggle_btn').css("background-image", "url('theme/sample137/img/close.png')");
}
$('.bottom_quick_wrap.pc_only').toggleClass('show');
}
)
</script>
답변 2
질문으로 원하는 내용 파악이 아려운데 기능을 추측하자면
open클릭 ==>보이기, close클릭 ==>숨기기
이런 것을 원하는 것 같은데 맞다면
1. 버튼 위치가 저 곳에 있어서는 숨김하면 버튼이 안보이니 열기를 할 수가 없을테니
div 밖으로 빼내세요
2. 보이기 숨기는 다음처럼
.bottom_quick_wrap.pc_only {
display:none;
}
.bottom_quick_wrap.pc_only.show {
display:block;
}
toggle_btn 클릭은 어떤 부분을 보여주고 감쳐주고 하는 것이 아닙니다.
단지
.bottom_quick_wrap.pc_only {
transform: translatey(100%);
}
.bottom_quick_wrap.pc_only.show {
transform: translatey(0%);
}
이 부분을 토글 해 주는 것 입니다.
자바스크립트를 완전히 다르게 수정해야 할 것입니다.
어떤 부분을 보여줄려고 하면 display: none 을 조정해야 합니다.