accordion menu kiểu Xổ dọc bằng JQuery

Từ một tài liệu sưu tập, mình chợt nghĩ đến một cách để ứng dụng nó vào thực tiễn thiết kế accordion menu kiểu xổ dọc bằng JQuery. Các bước tiến hành cũng khá đơn giản, như sau:
Bước 1:
Đăng nhập vào Blogger > Layout > Edit HTML (Không cần Mở rộng Mẫu tiện ích)
Bước 2:
Thêm đoạn code bên dưới vào ngay trên thẻ </head>

<script src='http://code.jquery.com/jquery.js' type='text/javascript'/>
<style type='text/css'>

/* Main accordion container */
.accordion{
width:500px;
}

/* accordion content div, default display is hidden */
.accContent{
display:none;
border:1px solid #CCCCCC;
padding:3px;
}

/* Title links (clickable to show their content and hide others) */
.acctitle{
display:block;
width:100%;
padding:3px 3px 3px 3px;
background-color:#CC0000;
color:#FFFFFF;
cursor:pointer
}

/* Default accordion class (usually first one so it is always visible) */
.defaultAccordion{
display:block;

}
</style>

Bước 3:
Thêm đoạn code bên dưới vào ngay dưới thẻ </head>


<script type='text/javascript'>

$(function(){

    // loop though each link

    $(&quot;a.acctitle&quot;).each(function(){

        // add an event on click

        $(this).click(function(){

            // hide all div&#39;s with accContent class

            $(&quot;.accContent&quot;).each(function(){

                $(this).hide(&quot;slow&quot;);

            });



            // the main point of this script - Fetch ref attribute of

            // title link and display the hidden div with that id

            $(&quot;#&quot;+$(this).attr(&quot;ref&quot;)).show(&quot;slow&quot;);

                return;

              });

    });

});

</script>

Bước 4:
Tạo 1 HTML/JavaScript: Chép Source Code dưới đây vào:


<div class="accordion">

    <a ref="first_section" class="acctitle">Thủ thuật Blogger</a>

    <div id="first_section" class="accContent defaultAccordion">

    <a href="Địa chỉ Url của các nhãn(label), Tag/Keyword">Căn bản về Blogger</a><br />

<a href="Địa chỉ Url của các nhãn(label), Tag/Keyword">Thiết kế cơ bản</a><br />

<a href="Địa chỉ Url của các nhãn(label), Tag/Keyword">Blogger Blogspot</a><br />

<a href="http://hocvalamtinhoc.blogspot.com/search/label/Tên nhãn">Css</a>

    </div>



    <a ref="second_section" class="acctitle">Tin học</a>

    <div id="second_section" class="accContent">

        <a href="http://hocvalamtinhoc.blogspot.com/search/label/Tên nhãn">FaceBook</a><br />

<a href="http://hocvalamtinhoc.blogspot.com/search/label/Tên nhãn">Google</a><br />

<a href="http://hocvalamtinhoc.blogspot.com/search/label/Tên nhãn">Kỹ thuật tin học</a>

    </div>



    <a ref="third_section" class="acctitle">Những thứ khác</a>

    <div id="third_section" class="accContent">

        <a href="http://hocvalamtinhoc.blogspot.com/search/label/Tên nhãn">Chuyện đó đây</a><br />

<a href="http://hocvalamtinhoc.blogspot.com/search/label/Tên nhãn">Hộp thử Code HTML/JavaScript</a>

    </div>

</div>

Lưu Widget nầy lại và đặt nó ở nơi mà bạn cần thiết. Nó sẽ có hình như dưới đây:

Chú thích:
Bạn cần phải thay vào cho phù hợp

- Các hàng chữ màu đỏ:là tiêu đề của menu, khi bạn click chuột vào nó sẽ xổ xuống một danh sách chọn lựa. Như hình trên, các tiêu đề gồm: Thủ thuật Blogger, Tin học, Những thứ khác.

- Các hàng chữ màu xanh Địa chỉ Url của các nhãn(label), Tag/Keyword: Tự tên của nó, bạn muốn thay bằng địa chỉ nhãn (thẻ label) hay địa chỉ của một Tag/keyword do bạn tự tạo cũng được.

Để tạo một Keyword, bạn tham khảo bài: Tạo bộ tag , keyword cho bài viết trong blogspot

- Các hàng chữ màu vàng: là tên của các Nhãn(label), hoặc Tag/keyword mà bạn cần hiển thị trong danh mục truy cập. Nó phải đồng hành với nội dung địa chỉ của Địa chỉ Url của các nhãn(label), Tag/Keyword.

- width:500px như ở bước thực hiện số 2, bạn có thể thay nó là mấy cũng được cho phù hợp với size của bạn.

Chúc các bạn thành công.
Nguồn tham khảo: Bài sưu tập