Coding

[jQuery] hide, show (feat. text)

이즈 life 2021. 9. 8. 20:10

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>