JSFiddle - React, Tailwind, and code Playground

by HYEONGJINKIM

HTML

<div id="wrap">
<div id="header">
Header
<button class="size" id="size_embeded" type="button">e</button>
<button class="size" id="size_smartphone" type="button">s</button>
<button class="size" id="size_pc" type="button">p</button>
</div>
<div id="content">
<iframe id="embeded_chat" width="300" height="600" frameborder="no" scrolling="auto" src="http://dev.talktalk.naver.com" name="이름"></iframe>
</div>
</div>

CSS

#wrap{
position: fixed;
right: 0;
bottom: -600px;
}
#header{background-color:#00ff00; broder: 1px solid #c8c8c8;}
#content{}

JavaScript

$('#header').toggle(function() {
$("#wrap").animate({
bottom: "0px"
}, 200);
}, function() {
$("#wrap").animate({
bottom: "-600px"
}, 200);
});

$(".size").on("click",function(){
var size = null;
var sid = $(this).attr("id");
if(sid=="size_pc"){
size=980;
}else if(sid=="size_smartphone"){
size=400;
}else{
size=300;
}

$("#embeded_chat").attr("width",size);
return false;
});