최근 jQuery를 공부하고 있습니다. 기억한 내용을 조금씩 내보내고 싶습니다.
처음에는 제목을 클릭하면 그 아래에 내용이 미끄러져 나오는 아코디언 패널을 만드는 방법.

1 준비

우선은 HTML을 준비.

<dl>
    <dt>メニュー1</dt>
    <dd><p>メニュー1の内容</p></dd>
    <dt>メニュー2</dt>
    <dd><p>メニュー2の内容</p></dd>
    <dt>メニュー3</dt>
    <dd><p>メニュー3の内容</p></dd>
</dl>

다음으로 CSS를 준비. 색상과 크기를 적당히 결정하고 있습니다.

dl {
    width: 400px;
}
dt {
    height: 30px;
    background-color: gray;
}
dd {
    margin: 0;
    height: 100px;
    background-color: darkgray;
}
dd p {
    margin: 0;
}

브라우저에서 표시하면 이런 느낌이 듭니다.

메뉴가 전부 열려 있는 상태네요.
이것을 클릭하면 메뉴의 내용이 열리거나 닫히도록 하는 것입니다.

2 JavaScript 작성

JavaScript를 작성하여 기능을 구현해 봅시다.
우선, 2번째 이후의 메뉴는 초기 표시되지 않도록 합시다.

$(function(){
    $("dd:not(:first)").css("display","none");
});

여기에서는 $("dd:not(:first)") 로, 「dd 요소 중, 최초의 요소가 아닌 것」을 지정하고 있습니다.
또한 .css("display","none")에서 CSS의 display 속성을 none으로 변경했습니다.
이로 인해 두 번째 이후의 메뉴 (dd 요소의 내용)가 표시되지 않습니다.

3 완성

클릭하면 열거나 닫는 기능을 추가합니다.

$(function(){
    $("dd:not(:first)").css("display","none");
    $("dl dt").click(function(){
        //ここにクリックしたときの動きを書く
    });
});

$("dl dt") 에서 dl 요소의 dt 요소를 지정합니다. 즉, 메뉴의 타이틀 부분이군요.
여기를 클릭했을 때의 움직임을 추기해 갑니다.

$(function(){
    $("dd:not(:first)").css("display","none");
    $("dl dt").click(function(){
        if($("+dd",this).css("display")=="none"){
            $("dd").slideUp("slow");
            $("+dd",this).slideDown("slow");
        }
    });
});

$("+dd",this) 에서 클릭된 dt 요소(메뉴 제목 부분)와 인접한 dd 요소(메뉴 내용)를 지정합니다.
그 dd 요소의 display property가 none, 즉 표시되어 있지 않은 경우, $("dd").slideUp("slow") 로, 일단 모든 dd 요소를 비표시로 합니다.
그리고 $("+dd",this).slideDown("slow") 에서 클릭된 dt 요소와 인접한 dd 요소만 표시합니다.

할 수 있었다.

4 끝

jQuery는 getElementsByClass 라든지 setAttribute 라든지를 깨끗이 쓸 수 있는 것이 좋네요.
하지만 짧은 기술이 메소드 체인과 함부로 많이 연결되어 가기 때문에, 문장의 도중에 무엇을 하고 있는지 잃는 것이 많다···.
또, 괄호(){}를 대량으로 사용하므로, 여분에 쓰거나 닫는 것을 잊거나 하는 실수도 잘 해 버립니다.
아직도 공부하기 시작한지 ​​얼마 안되어 간단한 내용밖에 쓸 수 없지만, 앞으로도 가능한 한 기사를 써 가고 싶습니다.