[JS] 버튼 클릭 시 요소(내용) 보이기 구현(display none, block)

See the Pen Untitled by 모카 (@akauwwdc-the-encoder) on CodePen.

button과 JS를 이용해 버튼을 클릭하면 원하는 내용이 나오도록 하는 기능을 구현하는 코드이다 !

 

onclick시 showContent 함수가 실행되는데,

 

A버튼 B버튼은 같은 기능을 하지만 각각 눌렀을 때 보여줄 요소가 다르기 때문에

 

함수의 매개 변수를 이용해 이를 구분해준다.

 

숨기고 보여줄 요소인 div를 우선 display:none;으로 숨긴 뒤

 

버튼을 눌렀을 때 받은 매개변수가 A라면(A button onclick) A 내용을 display:block;

 

받은 매개변수가 B라면(B button onclick) B 내용을 display:block;로 작동시켜서 보이도록 해준다.