Trường Thực nghiệm GDPT Tây Ninh


You are not connected. Please login or register

Xem chủ đề cũ hơn Xem chủ đề mới hơn Go down  Thông điệp [Trang 1 trong tổng số 1 trang]

1Spoiler dạng button Empty Spoiler dạng button 26/7/2016, 9:20 am

KHCN

KHCN
Thành viên xuất sắc
Thành viên xuất sắc
Có cách dùng js, hình như có ai đấy viết rồi, mình không viết lại.

Còn đây là cách mình viết dùng css, nhẹ hơn. Nhược điểm là không đổi được text khi nhấn vào button.

Code:
.codebox.spoiler {
    border: 0 none;
    padding: 0;
    margin: 1em 0;
}

.codebox.spoiler > dt {
    appearance: button;
    -webkit-appearance: button;
    -moz-appearance: button;
    width: auto;
    display: inline-block;
    margin: 0;
    padding: 0 12px;
    font-size: 0;
    background: 0 none;
    color: inherit;
    border: 1px solid #ddd;
}

.codebox.spoiler > dt:after {
    content: "Nội dung bị ẩn";
    font-size: 13px;
    text-transform: uppercase;
    color: #0098cc;
}

.codebox.spoiler .spoiler_content {
    background: #fffde9;
    margin: 0;
    padding: 1em;
}

Zzbaivong

Xem chủ đề cũ hơn Xem chủ đề mới hơn Về Đầu Trang  Thông điệp [Trang 1 trong tổng số 1 trang]

Permissions in this forum:
Bạn không có quyền trả lời bài viết

 
Spoiler dạng button Flags_1