hide와 show를 이용하여 id=post-box 선언 된 box가 열렸다/닫혔다 하는 button 만들기
//처음 posting-box가 보이지 않게 하려면 <style> .posting-box {display: none;} 로 시작하면 된다.
<script>
function openclose() {
let status = $('#post-box').css('display');
if (status == 'block') {
$('#post-box').hide();
//post-box가 사라지도록 하는 jQuery
$('#btn-posting-box').text('포스팅박스 열기');
//post-box가 hide가 되면 글자를 바꿔준다.
} else {
$('#post-box').show();
//post-box가 보이도록 하는 jQuery
$('#btn-posting-box').text('포스팅박스 닫기');
//post-box가 show가 되면 글자를 바꿔준다.
}
</script>
<body>
<div class="jumbotron">
<h1 class="display-4">나홀로 링크 메모장</h1>
<p class="lead">중요한 링크를 저장해두고, 나중에 볼 수 있는 공간입니다.</p>
<hr class="my-4">
<p class="lead">
<a onclick="openclose()" id="btn-posting-box" class="btn btn-primary btn-lg" href="#" role="button">포스팅박스 열기</a>
</p>
</div>
<div class="posting-box" id="post-box">
<div class="form-group">
<label for="article-url">아티클 url</label>
<input type="email" class="form-control" id="article-url" aria-describedby="emailHelp">
</div>
<div class="form-group">
<label for="exampleInputPassword1">간단 코멘트</label>
<input type="password" class="form-control" id="exampleInputPassword1">
</div>
<button type="submit" class="btn btn-primary">Submit</button>
</div>
'Coding' 카테고리의 다른 글
| [Python, mongo DB, Robo3T, Git bash] 설치하기 (1) | 2021.09.12 |
|---|---|
| [API] GET, POST (feat. jsonview) (0) | 2021.09.08 |
| [jQuery] temp_html / append (feat. `` back-tick) (0) | 2021.09.05 |
| [jQuery] 입력된 값, 글자 바꾸기 (0) | 2021.09.05 |
| [jQuery] css 값 확인, 변경하기 (0) | 2021.09.05 |
