전에 CSS값 가져와보기에서 display값을 가져와봤던

'none'과 'block'에서

📢포스팅 박스 열기닫기

를 해볼것이다.일단 전에 했던
onclick="hey()"랑 함수를 지우고
onclick="openclose()"를 넣는다
function openclose() {
alert('잘된다!')
}

브라우저에서 포스팅박스 열기를 하면 작동이된다.

alert으로 '잘된다!'라는 문구가 떴으면

console창에서 display값 가져오기

$('#post-box').css('display')
'block'

파이참에서 status라고 이름을 주고 거기에 display값을 가져와본다

function openclose() {
            let status = $('#post-box').css('display');
        }

💡(세미클론 붙여도되고 안붙여도 되지만 이왕이면 통일하는게 좋다.)
console.log(status);

console창에서 확인해본다.

브라우저에서 포스팅박스 열기(onclick에 걸어놨으니까 확인)를 눌러본다
console창에서 block이라고 찍힌다.

 function openclose() {
            let status = $('#post-box').css('display');
            if (status == 'block') {
                $('#post-box').hide();
            }   else {
                 $('#post-box').show();
            }
        }

👉status가 block이라면
$('#post-box')를 hide해라
아니면
$('#post-box')를 show해라
브라우저에서 refresh하고 포스팅박스를 열고 닫고하면 작동이 된다.

📢닫을때 text"포스팅박스 닫기"로 바뀌게 하기

hide였을때 닫을거냐 show할때 닫을거냐
대충 일단 만들어보고 아니면 바꾸면 된다.
$('#post-box').hide(); hide 아래에 복붙하고
점프트론에 id를 복사해서
$('#btn-posting-box').text('포스팅박스 닫기')
$('#post-box').show();show아래에
$('#btn-posting-box').text('포스팅박스 열기')
라고 수정해준뒤 브라우저에서 확인해본다.
반대로 됐으면 닫기 열기부분만 수정해서 브라우저에서 확인
잘된다!!!

처음부터 닫혀져있으면 더 좋을것 같다.

📢처음부터 닫혀있게 하기

div class에 posting-box로 명찰준것이 있고 style안에서 해결을 한다.
style안 posting-box안에서 해결을 한다.
그 아래에 display:none;
이제 브라우저에 새로고침을 하면 처음부터 닫혀있다.