테이블 자신 펼침

by hlee0126

HTML

<div class="section_exp">
    <table id="contents" class="list01">
        <caption>응모 목록</caption>
        <colgroup>
            <col width="71" />
            <col />
            <col width="95" />
            <col width="137" />
        </colgroup>
        <thead>
            <tr>
                <th>
                    <div class="th">No.</div>
                </th>
                <th>
                    <div class="th">내용</div>
                </th>
                <th>
                    <div class="th">작성일</div>
                </th>
                <th>
                    <div class="th">아이디</div>
                </th>
            </tr>
        </thead>
        <tbody>
            <tr class="title">
                <td>000</td>
                <td class="title"><a href="conts0">비비고 언양 불고기를 노릇노릇 구워서 약고추장과 함께 상추에 싸먹기만해도 맛있을같아요~ 요요요요요요요요요요요요요요요요요요요</a>

                </td>
                <td>2015.05.01</td>
                <td>dklfjwei*****</td>
            </tr>
            <tr class="conts conts0">
                <td>000</td>
                <td class="tal">	<a href="#" class="current">
										비비고 언양 불고기를 노릇노릇 구워서 약고추장과 함께 상추에 싸먹기만해도 맛있을같아요~<br /> 
										비비고 언양 불고기를 노릇노릇 구워서 약고추장과 함께 상추에 싸먹기만해도 맛있을같아요~<br />
										비비고 언양 불고기를 노릇노릇 구워서 약고추장과 함께 상추에 싸먹기만해도 맛있을같아요~<br />
										비비고 언양 불고기를 노릇노릇 구워서 약고추장과 함께 상추에 싸먹기만해도 맛있을같아요~ 
									</a>
	<a href="#" class="url">블로그 주소 : http://blog.naver.com/djWJrnwjWJrn</a>

                </td>
                <td>2015.05.01</td>
                <td>dklfjwei*****</td>
            </tr>
            <tr class="title">
                <td>000</td>
                <td class="title"><a href="conts1">비비고 언양 불고기를 노릇노릇 구워서 약고추장과 함께 상추에 싸먹기만해도 맛있을같아요~</a>

                </td>
                <td>2015.05.01</td>
                <td>dklfjwei*****</td>
            </tr>
            <tr class="conts conts1">
                <td>000</td>
                <td class="tal">	<a href="#"...

CSS

.section_exp .list01 {
    margin:40px auto 30px;
    color:#737373;
    width: 900px;
}
.section_exp .list01 th {
    height: 30px;
    border: 1px solid #7f7f7f;
    border-left: 0;
    border-right: 0;
}
.section_exp .list01 th div {
    border-left: 1px solid #959595;
}
.section_exp .list01 th:first-child div {
    border-left:0
}
.section_exp .list01 td {
    height:50px;
    text-align: center;
    border: 1px solid #d5d5d5;
    border-left: 0;
    border-right: 0;
}
.section_exp .list01 td.title, .section_exp .list01 td.tal {
    text-align:left;
}
.section_exp .list01 td.title a {
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    display: block;
}
.section_exp .list01 td a {
    color:#737373;
}
.section_exp .list01 .conts td {
    background:#f6f0e8;
    line-height: 2;
    padding: 17px 0;
}
.section_exp .list01 .conts a.current {
    outline: none;
    text-decoration: none;
}
.section_exp .list01 .conts a.url {
    color:#ff7011;
    display: block;
    text-decoration: underline;
}
.section_exp .list01 .tr_hide {
    display:none !important;
}

JavaScript

$("tr.conts").addClass("tr_hide");

	$("td.title a").bind("click", function(event) {
		event.preventDefault();

		var p = $(this).parent().parent();
		$("tr.title").removeClass("tr_hide");
		p.addClass("tr_hide");

		var t = $(this).attr("href");
		t = $("." + t);
		$(".conts").addClass("tr_hide");
		t.removeClass("tr_hide");
		$("a.current").focus();
	});