Hide or Show Sidebar with jQuery Toggle

Đa phần thiết kế bố cục website thường chia làm 2 cột, một cột chứa nội dung (content-wrapper) và một cột chứa các tiện ích, treo quảng cáo (sidebar-wrapper). Khi người dùng cảm thấy phần không gian để đọc bài viết chưa đủ thỏa mãn họ thì lúc đó bạn cần nghĩ đến cho mình 1 nút có khả năng ẩn sidebar để tăng kích thước cho phần nội dung bài viết, bạn sẽ làm được nó khi đọc xong bài viết này

Demo

Ok thủ thuật này rất đơn giản thôi. Trước hết bạn cần tìm được id hoặc class của 2 thành phần "content" và "sidebar". Lấy ví dụ

Xác định được css của chúng, lấy ví dụ

Bây giờ ta sẽ sử dụng jQuery Toggle class để làm ẩn đi sidebar, tôi sẽ chỉ tạo button cho trang bài viết

Đặt code HTML trước </body>

<b:if cond='data:view.isPost'>
    <a class='hide-sidebar' href='javascript:void(0)'>
        <span class='hide-sidebar-content'>
            <input checked='true' class='switch-input-sidebar' id='toggle-sidebar' name='set-name' type='checkbox'/>
            <label class='switch-label-sidebar' for='toggle-sidebar' title='Show/Hide Sidebar'/>
        </span>
    </a>
</b:if>

Viết CSS

.hide-sidebar{
    background-color:#7d026d;
    border-radius:3px 0 0 3px;
    box-shadow:rgba(0,0,0,.2) 0 4px 10px;
    position:fixed;
    z-index:444;
    padding:0;
    opacity:1;
    top:70px;
    right:-45px;
    transition:all .4s
}
 .hide-sidebar:hover{
    right:0
}
 .hide-sidebar-content{
    display:block;
    width:45px;
    height:40px;
    background:#fff;
    margin-left:4px;
    border-radius:3px 0 0 3px;
    margin-right:0;
    position:relative
}
 .switch-label-sidebar{
    position:absolute;
    cursor:pointer;
    font-weight:bold;
    text-align:left;
    top:20px;
    left:4px
}
 .switch-label-sidebar:after,.switch-label-sidebar:before{
    content:"";
    position:absolute;
    margin:0;
    outline:0;
    top:50%;
    -ms-transform:translate(0,-50%);
    -webkit-transform:translate(0,-50%);
    transform:translate(0,-50%);
    -webkit-transition:all .4s ease;
    transition:all .4s ease
}
 .switch-label-sidebar:before{
    left:1px;
    width:34px;
    height:14px;
    background-color:#9E9E9E;
    border-radius:8px
}
 .switch-label-sidebar:after{
    left:0;
    width:20px;
    height:20px;
    background-color:#FAFAFA;
    border-radius:50%;
    box-shadow:0 0 2px 1px rgba(0,0,0,.2),0 2px 2px 0 rgba(0,0,0,.098),0 1px 5px 0 rgba(0,0,0,.084)
}
 .switch-input-sidebar:checked+.switch-label-sidebar:before{
    background-color:rgba(161, 111, 199, .8)
}
 .switch-input-sidebar:checked+.switch-label-sidebar:after{
    background-color:#7d026d;
    -ms-transform:translate(80%,-50%);
    -webkit-transform:translate(80%,-50%);
    transform:translate(80%,-50%)
}
 .switch-input-sidebar{
    display:none
}

Chèn code js trước </body>

<b:if cond='data:view.isPost'>
<script type='text/javascript'>//<![CDATA[
$("#toggle-sidebar").change(function() {
    0 == $(this).is(":checked") ? ($(".sidebar-wrapper").addClass("hide"), $(".content-wrapper").addClass("resize")) : ($(".sidebar-wrapper").removeClass("hide"), $(".content-wrapper"").removeClass("resize"))
});
//]]></script>
</b:if>

Trong đó bạn cần thay các class .sidebar-wrapper và .content-wrapper thành class trong template của bạn.

Tiếp tục viết css khi có sự kiện switch button

.sidebar-wrapper.hide{display:none}
.content-wrapper.resize{width:100%}

Tương tự bạn cũng thay class .sidebar-wrapper và .content-wrapper thành class trong template của bạn.

Cuối cùng đó là ẩn nút switch đi, khi đạt tới một "break point" nào đó template của bạn sẽ cần chỉnh lại bố cục để responsive với các thiết bị di động. Bạn check xem trong template của mình break point đó có giá trị bao nhiêu. Ví dụ với temp khi tới độ rộng 768px thì bắt đầu bỏ float:left-right của sidebar và content, khi đó nút switch này vô tác dụng ta sẽ ẩn nó đi bằng code sau

@media screen and (max-width:768px){.hide-sidebar{display:none}}

Đây là nút switch đơn giản, không làm vỡ bố cục cho phép người dùng có thể dễ dàng tăng không gian cho phần nội dung bài viết

Để lại bình luận nếu gặp khó khăn và chúc thành công !