JQuery 활용

스파르타코딩클럽 / 2-5 / JQuery 활용

1)
JQuery 적용할 값 만들기
function openclose() {}
onclick="openclose()"

<script>
function openclose() {
	// 여기에 jQuery를 이용해 코드를 짤 예정    
}
</script>

// onclick 속성(attribute)을 추가합니다.
<button onclick="openclose()" class="btn btn-primary btn-lg">포스팅박스 열기</button>

2)
해당되는 내용에 id값 부여하기
id="post-box"

<div class="form-post" id="post-box">
    <div>
        <div class="form-group">
            <label for="exampleFormControlInput1">아티클 URL</label>
            <input class="form-control" placeholder="">
        </div>
        <div class="form-group">
            <label for="exampleFormControlTextarea1">간단 코멘트</label>
            <textarea class="form-control" rows="2"></textarea>
        </div>
        <button type="button" class="btn btn-primary">기사저장</button>
    </div>
</div>

3)
function openclose() {} 값 안에 해당되는 내용 숨겼다가 나타나게 만들기

function openclose() {
    // id 값 post-box의 display 값이 block 이면
    // post-box를 가리고
    // 아니면 post-box를 펴라
    if ($('#post-box').css('display') == 'block') {
        $('#post-box').hide();
    } else {
        $('#post-box').show();
    }
}

4)
id="btn-posting-box" id 값 부여하기

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

5)
function openclose() {} 값 안에 해당되는 내용 숨겼다가 나타날 때 달라지는 버튼 모양 적용하기

    // id 값 post-box의 display 값이 block 이면
    // post-box를 가리고
    // 가렸으니까 이제 열기로 바꿔두기
    // 아니면 post-box를 펴라
    // 폈으니까 이제 닫기로 바꿔두기
function openclose() {
    if ($('#post-box').css('display') == 'block') {
        $('#post-box').hide();
        $('#btn-posting-box').text('포스팅 박스 열기');
    } else {
        $('#post-box').show();
        $('#btn-posting-box').text('포스팅 박스 닫기');
    }
}