JS 7일차

# Accordion

<style>
	.max-h-0 {
		max-height: 0;
	}
	.max-h-40 {
		max-height: 10rem;
	}
</style>
 
<div class="container">
	<button onclick="f(this)">Tab</button>
	<div class="item max-h-0">
		<p>Lorem ipsum dolor sit amet consectetur adipisicing elit.</p>
	</div>
</div>

<script>
	function f(el) {
		console.log(el);

		const item = el.nextElementSibling;
            
		item.classList.toggle('max-h-0');
		item.classList.toggle('max-h-40');  // toggle: 있는 것을 빼고 없는 것을 집어넣는다
		console.log(item)
	}
</script>

- 버튼을 클릭했을 때(onclick) 함수 f의 argument를 this로 둠으로서 js에서의 el은 button이 된다.

- 그리고 다시 item을 el의 바로 다음 element인 div로 선언한다

- toggle을 통해 div의 크기를조절할 수 있도록 한다.

---

# Accordion 2

    <style>
        button {
            border: none;
            background-color: transparent;
            padding: 0.5rem;
            font-weight: bold;
            cursor: pointer;
        }
        .hidden {
            display: none;
        }
        .active {
            border-bottom: 2px solid #333;
        }
    </style>

    <div class="">
        <button id="default" onclick="f(event, 'b0')">Guinness</button>
        <button onclick="f(event, 'b1')">Heineken</button>
        <button onclick="f(event, 'b2')">Budwiser</button>
    </div>

    <div class="container">
        <div id="b0" class="beer">
            <h3>Guinness</h3>
            <p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Maiores molestiae, quia cum modi sit suscipit qui harum rerum odit. Ipsam vero magni, quae velit officiis ea repellat placeat fugiat iste?</p>
        </div>

        <div id="b1" class="beer">
            <h3>Heineken</h3>
            <p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Maiores molestiae, quia cum modi sit suscipit qui harum rerum odit. Ipsam vero magni, quae velit officiis ea repellat placeat fugiat iste?</p>
        </div>
        <div id="b2" class="beer">
            <h3>Budwiser</h3>
            <p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Maiores molestiae, quia cum modi sit suscipit qui harum rerum odit. Ipsam vero magni, quae velit officiis ea repellat placeat fugiat iste?</p>
        </div>
    </div>

    <script>
        function f(e, id) {
            console.log(e);     // event 객체
            console.log(e.target);  //button
            console.log(id);

            // # 컨텐츠 활성화
            let beers = document.getElementsByClassName('beer');

            // 모든 beer클래스를 안보이게 한다
            for(let i=0; i<beers.length; i++) {
                beers[i].classList.add('hidden');
            }

            // id에 일치하는 beer만 보이게 한다
            let beer = document.getElementById(id);
            beer.classList.remove('hidden');

            // # 버튼 활성화
            let buttons = document.querySelectorAll('button');

            // 모든 버튼에서 border 제거
            for(let i=0; i<buttons.length; i++) {
                buttons[i].classList.remove('active');
            }

            // 선택한 버튼만 border 활성화
            e.target.classList.add('active');
        }

        // 페이지 처음 로드되었을 때 (새로고침) 실행한다
        document.getElementById('default').click();
    </script>

- 선택한 컨텐츠만 효과를 적용하고 싶다면, for문을 이용하여 전체에 적용하고 해당 컨텐츠만 제거하거나, 전체에서 제거한 후 해당 컨텐츠만 다시 적용하는 방법을 사용한다.