<title>더보기 예제</title>
<script src="../JS/jquery.min.js"></script>
<script> //toggle은 display가있으면 설정을 바꾸는 기능이라서 toggle기능만 써도 hide<->show
$(function(){
$('#btn1').click(function(){
$('.coverUp').show();
$(this).hide();
$('#btn2').show();
});
$('#btn2').click(function(){
$('.coverUp').stop().hide();
$('#btn1').show();
$(this).hide();
});
})
</script>
<style>
button{
background-color: darkblue; color: white; font-weight: bold; border: 2px solid yellowgreen;
width: 70px; position: relative; top:0; right: 0;}
button:hover{
cursor: pointer;}
#btn2{
display: none;}
.box{
position: relative;}
.box>div{font-size: 50px; text-align: center;}
.basic1{
height: 100px; background-color: rgb(182, 110, 248); line-height: 100px;}
.basic2{
height: 200px; background-color: lightskyblue; line-height: 200px;}
.coverUp{
height: 400px; background-color: orange; position:absolute; top: 0; left:0; right: 0; display: none;
line-height: 400px;}
</style>
</head>
<body>
<button id="btn1">더보기+</button>
<button id="btn2">접기-</button>
<div class="box">
<div class="basic1">몬스터대학교</div>
<div class="basic2">몬스터주식회사</div>
<div class="coverUp">결국은 디즈니</div>
</div>
</body>더보기
<title>더보기 예제</title>
<script src="../JS/jquery.min.js"></script>
<script>
$(function(){
$('#more').on('click',function(){
$('.blue-box').stop().show();
$('#fold').show();
$(this).hide();
});
$('#fold').click(function(){
$('.blue-box').stop().hide();
$('#more').show();
$(this).hide();
});
});
</script>
<style>
.container{
position: relative;}
.red-box{
height: 50px; background-color: red;}
.green-box{
height: 400px; background-color:green;}
.blue-box{
height: 300px; background-color: blue; position:absolute; top: 0; left:0; right:0; display: none;
color:white; font-size: 250px; line-height: 300px; text-align: center;}
#fold{
display: none;}
</style>
</head>
<body>
<button id="more">더보기+</button>
<button id="fold">접기-</button>
<div class="container">
<div class="red-box">몬스터대학교때는 픽사꺼였어</div>
<div class="green-box">몬스터주식회사때도 픽사꺼였어?</div>
<div class="blue-box">와</div>
</div>
</body>'괴발개발 > Javascript+JQuery' 카테고리의 다른 글
| JQ_요소의 정보를 가져오고(get) 설정하는(set) (0) | 2021.06.22 |
|---|---|
| JQ_chaining(체이닝기법) (0) | 2021.06.22 |
| JQ_rolling예제 (0) | 2021.06.22 |
| JQ_animate(애니메이션 효과) (0) | 2021.06.22 |
| JQ_fade(fadeIn, fadeOut, fadeToggle, fadeTo) (0) | 2021.06.22 |