2주차_5(jQuery다뤄보기3)

JQuery 적용하기(나홀로메모장)http://spartacodingclub.shop/

<a onclick="hey()" id="btn-posting-box" class btn-primary btn-lg" href="#" role="button">포스팅박스 열기</a>

hey 를 지우고 openclose 를 삽입

<a onclick="openclose()" id="btn-posting-box" class btn-primary btn-lg" href="#" role="button">포스팅박스 열기</a>

script에 fuction 입력

<script>
   function openclose(){
       let status = $(['#post-box']).css('dispaly');
       console.log(status)
   }
</script>

fuction에 if 추가

<script>
    function openclose() {
        let status = $('#post-box').css('display');
        if (status == 'block') {
            $('#post-box').hide()
            $('#posting-box-btn').text('포스팅박스 열기')
        } else {
            $('#post-box').show()
            $('#posting-box-btn').text('포스팅박스 닫기')
        }
    }
</script>

  ※나머지는 다 '' 작은 따음표

posting-box를 시작부터 감춰두기 (css의 display:none 속성!)

이런 것을, inline-style (인라인 스타일) 이라고 부릅니다.

여기저기 쓰면 복잡하겠지만, 이렇게 쓰면

직관적으로 "아 처음부터 안보이는 태그구나!"를 알 수 있겠죠!

(물론, class주고, css에서 display:none 속성을 주는 것도 방법이구요!)

.posting-box {
    width: 500px;
    margin: 0px auto 30px auto;
    padding: 30px;
    border: 3px solid black;
    border-radius: 10px;
}

▼

.posting-box {
    width: 500px;
    margin: 0px auto 30px auto;
    padding: 30px;
    border: 3px solid black;
    border-radius: 10px;
    display: none;
}