클릭하면 나오는거 문의드립니다
본문
아래 이미지중 하나를 누를시 그 아래 이미지 처럼 아래에 공간이 나오는 효과를
사용하고싶은데요.. 소스가 있을까요 ㅠㅠ
답변 3
<style type="text/css">
.hidden { display:none; }
</style>
<script src="http://code.jquery.com/jquery-latest.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function () {
$("#btn").click( function () {
$("#myToggle").toggleClass("hidden");
});
});
</script>
<input id="btn" type="button" value="toggle 버튼">
<div id="myToggle" style="background-color:Yellow;">
hello!!
</div>
이걸 응용해 보세요.
<input type="radio" name="wr_1" id="wr_1" value="1" onclick="div_OnOff(this.value,'date_con');" <?php if($write[wr_1]=="1") echo"checked";?>> 대출신청<br>
<input type="radio" name="wr_1" id="wr_1" value="2" onclick="div_OnOff(this.value,'date_con');" <?php if($write[wr_1]=="2") echo"checked";?>> 상세보기
<?php
if($write[wr_1] =="2") {
?>
<div id="date_con" style="display:">
<? } else { ?>
<div id="date_con" style="display:none">
<? } ?>
-- 보여줄 내용 --
</div>
<script>
function div_OnOff(v,id){
// 라디오 버튼 value 값 조건 비교
if(v == "2"){
document.getElementById(id).style.display = ""; // 보여줌
}else{
document.getElementById(id).style.display = "none"; // 숨김
}
}
</script>
이런식으로 하시면 될 듯...
<script src="http://code.jquery.com/jquery-latest.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function () {
$("#btn").click(function () {
if($("#myToggle").css("display") == "none"){
$('#myToggle').show();
} else {
$('#myToggle').hide();
}
});
});
</script>
<input id="btn" type="button" value="toggle 버튼">
<div id="myToggle" style="background-color:Yellow; display:none;">
hello!!
</div>
이렇게 하면 처음에 안보일겁니다.