[Share] Block lấy tin được hiển thị theo dạng accordion

Sau khi tham gia khóa làm giao diện Nukeviet online của Lê Thúc Vinh. Cũng cố gắng mày mò tí để gọi là cho biết. Và đây là kết quả của em nó 

File download bên dưới

Copy đoạn css dưới vào style.css

.sj-accordion  {
	padding:0;
	overflow: hidden;
}
.sj-accordion .acd-items {margin:0;}
.sj-accordion .acd-items .acd-item{
	margin:0;
	padding:0;
}
.sj-accordion .acd-items .acd-item .acd-header{
	cursor: pointer ;
	border: 1px solid #ddd;
	margin:2px 0;
	padding: 5px 8px 5px 8px;
	white-space: nowrap;
	overflow: hidden;
	text-overflow:ellipsis;
}
.sj-accordion .acd-items .acd-item.selected .acd-header {
	font-weight: bold;
	color: #fff;
    background-color: #1192f6;
    background-image: -moz-linear-gradient(top,#1c9cff,#0083e8);
    background-image: -webkit-gradient(linear,0 0,0 100%,from(#1c9cff),to(#0083e8));
    background-image: -webkit-linear-gradient(top,#1c9cff,#0083e8);
    background-image: -o-linear-gradient(top,#1c9cff,#0083e8);
    background-image: linear-gradient(to bottom,#1c9cff,#0083e8);
    background-repeat: repeat-x;
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff1c9cff', endColorstr='#ff0083e8', GradientType=0);
    border-color: transparent;
}
.sj-accordion .acd-items .acd-item.selected .acd-header:hover {
    background-color: #0b8df1;
    background-image: -moz-linear-gradient(top,#0083e8,#1c9cff);
    background-image: -webkit-gradient(linear,0 0,0 100%,from(#0083e8),to(#1c9cff));
    background-image: -webkit-linear-gradient(top,#0083e8,#1c9cff);
    background-image: -o-linear-gradient(top,#0083e8,#1c9cff);
    background-image: linear-gradient(to bottom,#0083e8,#1c9cff);
    background-repeat: repeat-x;
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff0083e8', endColorstr='#ff1c9cff', GradientType=0);
    color: #fff;
}
.sj-accordion .acd-items .acd-item.selected .acd-header i {
    display: none;
}
.sj-accordion .acd-items .acd-item.selected .acd-header a{
	color: #fff;
}
.sj-accordion .acd-items .acd-item .acd-header:hover {
    color: #0083e8;
    background: #f1f1f1;
}
.acd-header a:hover {
    color: #0083e8;
}
.acd-content-wrap .acd-image .image-overlay {
    width: 100%;
    height: 100%;
    background-color: rgba(102,102,102,0.5);
    position: absolute;
    top: 0;
    left: 0;
    z-index: 5;
    opacity: 0;
    filter: alpha(opacity=0);
    -webkit-transition: all 0.25s ease-in-out 0s;
    -moz-transition: all 0.25s ease-in-out 0s;
    -o-transition: all 0.25s ease-in-out 0s;
    transition: all 0.25s ease-in-out 0s;
}
.acd-content-wrap .acd-image:hover .image-overlay {
    opacity: 1;
    filter: alpha(opacity=100);
}
.acd-content-wrap .acd-image .image-overlay .hover-links {
    position: absolute;
    top: 50%;
    right: 50%;
    margin: -18px -10px 0 0;
}
.acd-content-wrap .acd-image .image-overlay .hover-links a {
    width: 35px;
    height: 35px;
    background: #0083e8;
    line-height: 32px;
    text-align: center;
    margin: 0 2px;
    display: inline-block;
    -webkit-box-shadow: 0 0 1px rgba(0,0,0,0.2);
    -moz-box-shadow: 0 0 1px rgba(0,0,0,0.2);
    box-shadow: 0 0 1px rgba(0,0,0,0.2);
    border: 1px solid #1298ff;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}
.acd-content-wrap .acd-image:hover .image-overlay .hover-links a.hover-zoom:hover, .acd-content-wrap .acd-image:hover .image-overlay .hover-links a.hover-link:hover {
    background: #1c9cff;
}
.acd-content-wrap .acd-image .image-overlay .hover-links a i {
    margin: 0;
    font-size: 14px;
    color: white;
}

.sj-accordion .acd-items .acd-item .acd-content-wrap .acd-content .acd-description{display: inline;}
/* .sj-accordion .acd-items .acd-item.selected .acd-content-wrap{
	height: auto;
} */
.sj-accordion .acd-items .acd-item .acd-content-wrap{
 	overflow: hidden; 
  	height: 0; 
	width:100%;
}
.sj-accordion .acd-content-wrap .acd-content-wrap-inner{
	margin:0;
	padding:0;
	overflow: hidden;
	display: block;
}
.sj-accordion .acd-content-wrap .acd-content-wrap-inner .acd-image{
	overflow: hidden;
	margin: 10px 0;
	position: relative;
	padding: 4px;
	border: 1px solid #ddd;
}

.sj-accordion .acd-content-wrap .acd-content-wrap-inner .acd-image img{
	float:left;
	max-width: 100%;
	width:100%;
	border:0;
	margin:0;
	padding:0;
}

.icon-add {
    width: 14px;
    height: 14px;
    text-align: center;
    background: #0083e8;
    padding:1px;
	color:#fff;
}

Vậy là xong.

P/s : gửi lời cám ơn Trần Phương nữa nhé.

 

Thêm tệp tin rồi mà sao không thấy gì?

 

không thấy file đâu hết

 

Lấy ở đây đi vậy 

https://drive.google.com/file/d/0B4iuqPCf8BmdQ01KWXdZU1lqU3M/view?usp=sharing

 

cảm ơn a

 

không giống demo 

 

Sao thế được? Inbox cho mình xem thử ?

 

 

quên ko chép js đó mà

 

copy file vao đâu vậy

 

có hướng dẫn mà

 

copy hết css mà đoạn kia nó ko ra dấu cộng ở đầu tin bác nhỉ ? cái này thêm toôtip nữa thì ngon :3

 

bạn muốn thêm tooltip thì copy nó ở file block_groups.tpl sang là được mà. Mình xóa đi vì thấy k cần thiết.