CSS

.animals div {
	background-color:#efefef;
	border:1px solid silver;
	margin:3px;
	padding:5px;
}
.animals div.on { /* 선택된 항목 강조 */
	background-color:#999;
	color:#fff;
	border-color:#444;
}

HTML

<div class="animals">
	<div>뉴칼레도니아 가고일 도마뱀붙이</div>
	<div class="on">살찐꼬리 난장이 여우원숭이</div>
	<div>윌리암슨 수액빨이 딱다구리</div>
	<div>쿠비어 난장이 카이만</div>
	<div>큰꼬리 검은 찌르레기 사촌</div>
</div>

<div style="text-align:center;">
	<button type="button" onclick="gogogo()">닫기</button>
	<button type="button" onclick="$('.animals').show()">열기</button>
</div>

자바스크립트

function gogogo(){
	$('.animals .on').removeClass('on'); // animals 클래스 요소안에 on 클래스를 찾아서 그 on 클래스 제거
	$('.animals').hide(); // animals 클래스 요소 안보이게 하기 - display:none;
}

사실 이렇게 해도 큰 문제는 없습니다. 코드도 단순하고 말이죠.
1미터 이동하는데 시속 100km 로 가나 50km 로 가나 뭐 그게 그거인거죠.. (비유가 맞나 ㄷㄷ)
하지만 1km 를 가야한다면 상황은 달라지겠죠..

마음의 소리가 들리지 않나요? 아냐 저건 뭔가 아니야 .. 좀 더 뭐가 있을거야.. 이런..

실행 가능한 소스

HTML

<div class="animals">
	<div>뉴칼레도니아 가고일 도마뱀붙이</div>
	<div class="on">살찐꼬리 난장이 여우원숭이</div>
	<div>윌리암슨 수액빨이 딱다구리</div>
	<div>쿠비어 난장이 카이만</div>
	<div>큰꼬리 검은 찌르레기 사촌</div>
</div>

<div style="text-align:center;">
	<button type="button" onclick="gogogo()">닫기</button>
	<button type="button" onclick="$('.animals').show()">열기</button>
</div>

자바스크립트

function gogogo(){
	var $el = $('.animals'); // $el 변수에 결과를 담아서 사용합니다. 이 변수를 이용하면 캐시 효과 !
	$('.on', $el).removeClass('on'); // animals 클래스 요소안에 on 클래스를 찾아서 그 on 클래스 제거 ^^;
	$el.hide(); // animals 클래스 요소 안보이게 하기 - display:none;
}

$el = $('.animals') 처럼 변수를 만들어서 사용합니다.
$('.animals') 를 여러번 사용하는 대신 $el 을 여러번 사용하는게 더 이득입니다.
자주 사용한다면 변수로 만들어 두고 그 변수를 가져다 쓰면됩니다.

뭐 두번만 쓸거면 살짝고민이 되겠네요. 세번이라도 ㅎㅎ

※ 예제에서 el 은 element 를 의미하는 줄임말 입니다.

실행 가능한 소스

HTML

<div class="animals">
	<div>뉴칼레도니아 가고일 도마뱀붙이</div>
	<div class="on">살찐꼬리 난장이 여우원숭이</div>
	<div>윌리암슨 수액빨이 딱다구리</div>
	<div>쿠비어 난장이 카이만</div>
	<div>큰꼬리 검은 찌르레기 사촌</div>
</div>

<div style="text-align:center;">
	<button type="button" onclick="gogogo()">닫기</button>
	<button type="button" onclick="$('.animals').show()">열기</button>
</div>

자바스크립트

function gogogo(){
	$('.on', $('.animals').hide() ).removeClass('on'); // 더 줄었죠. ㅎㅎ
	// $('.animals').hide() 는 실행후 $('.animals') 가 반환됩니다.
	// 반환된 $('.animals') 를 다시 재 사용합니다.
	// $('셀렉터', $요소) 이런 방법을 씁니다.
}

$('.on', $('.animals').hide() ).removeClass('on')

캐시는 쓰지 않았지만 원하는것을 간단히 해결했습니다.
$('.animals').hide() 는 실행이 끝나면 $('.animals') 를 반환하게 됩니다.
그걸 그대로 받아서 다시 사용했습니다.

실행 가능한 소스

HTML

<div class="animals">
	<div>뉴칼레도니아 가고일 도마뱀붙이</div>
	<div class="on">살찐꼬리 난장이 여우원숭이</div>
	<div>윌리암슨 수액빨이 딱다구리</div>
	<div>쿠비어 난장이 카이만</div>
	<div>큰꼬리 검은 찌르레기 사촌</div>
</div>

<div style="text-align:center;">
	<button type="button" onclick="gogogo()">닫기</button>
	<button type="button" onclick="$('.animals').show()">열기</button>
</div>

자바스크립트

function gogogo(){
	$('.animals').hide().find('.on').removeClass('on'); // 완벽하게 체인캐스팅 ?
	// $('.animals').hide() 하고 find 메서드로 on 클래스 찾기
}

코드 자체도 굉장히 직관적 입니다.
animals 클래스를 숨기고 on 클래스를 찾은 다음 제거해라.
이렇게 코딩해 두면 여러모로 좋습니다.

실행 가능한 소스