🐬 Wapmaster share code hay: Code ẩn hiện nội dung

Thời gian.

Google dịch nội dung .

Tạo các tab dọc có thể thay đổi được

London

London là thủ phủ của nước Anh..

Paris

Paris là thủ đô của Pháp.

Tokyo

Tokyo là thủ đô của Nhật Bản.

/* Style the tab */
div.tab {
    float: left;
    border: 1px solid #ccc;
    background-color: #f1f1f1;
    width: 30%;
    height: 300px;
}

/* Style the buttons inside the tab */
div.tab button {
    display: block;
    background-color: inherit;
    color: black;
    padding: 22px 16px;
    width: 100%;
    border: none;
    outline: none;
    text-align: left;
    cursor: pointer;
    transition: 0.3s;
    font-size: 17px;
}

/* Change background color of buttons on hover */
div.tab button:hover {
    background-color: #ddd;
}

/* Create an active/current "tab button" class */
div.tab button.active {
    background-color: #ccc;
}

/* Style the tab content */
.tabcontent {
    float: left;
    padding: 0px 12px;
    border: 1px solid #ccc;
    width: 70%;
    border-left: none;
    height: 300px;
}
</style>

<h2>Tạo các tab dọc có thể thay đổi được</h2>
<div class="tab">
  <button class="tablinks" onclick="openCity(event, 'London')" id="defaultOpen">London</button>
  <button class="tablinks" onclick="openCity(event, 'Paris')">Paris</button>
  <button class="tablinks" onclick="openCity(event, 'Tokyo')">Tokyo</button>
</div>

<div id="London" class="tabcontent">
  <h3>London</h3>
  <p>London là thủ phủ của nước Anh..</p>
</div>

<div id="Paris" class="tabcontent">
  <h3>Paris</h3>
  <p>Paris là thủ đô của Pháp.</p> 
</div>

<div id="Tokyo" class="tabcontent">
  <h3>Tokyo</h3>
  <p>Tokyo là thủ đô của Nhật Bản.</p>
</div>

// Get the element with id="defaultOpen" and click on it
document.getElementById("defaultOpen").click();
</script>

Nhấp vào các nút để mở nội dung có thể đóng lại.

Tìm hiểu cách tạo một đàn accordion (nội dung có thể đóng lại).

Accordions rất hữu ích khi bạn muốn chuyển đổi giữa ẩn và hiển thị số lượng lớn nội dung

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

button.accordion.active, button.accordion:hover {
    background-color: #ccc; 
}

div.panel {
    padding: 0 18px;
    display: none;
    background-color: white;
}
</style>

<button class="accordion">Section 1</button>
<div class="panel">
  <p>Tìm hiểu cách tạo một đàn accordion (nội dung có thể đóng lại).</p>
</div>

<button class="accordion">Section 2</button>
<div class="panel">
  <p>Accordions rất hữu ích khi bạn muốn chuyển đổi giữa ẩn và hiển thị số lượng lớn nội dung</p>
</div>

<button class="accordion">Section 3</button>
<div class="panel">
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
</div>

for (i = 0; i < acc.length; i++) {
    acc[i].onclick = function(){
        this.classList.toggle("active");
        var panel = this.nextElementSibling;
        if (panel.style.display === "block") {
            panel.style.display = "none";
        } else {
            panel.style.display = "block";
        }
    }
}
</script>

Nhấp vào các nút để đóng lại nội dung .

× 111111111111111111111

× bbbbbbbbbbbbbb22222222222222222222.

× ccccccccccccccccc

× Warning! Indicates a warning that might need attention.
<style> .alert { padding: 20px; background-color: #f44336; color: white; opacity: 1; transition: opacity 0.6s; margin-bottom: 15px; } .alert.success {background-color: #4CAF50;} .alert.info {background-color: #2196F3;} .alert.warning {background-color: #ff9800;} .closebtn { margin-left: 15px; color: white; font-weight: bold; float: right; font-size: 22px; line-height: 20px; cursor: pointer; transition: 0.3s; } .closebtn:hover { color: black; } </style> <h2>Nhấp vào các nút để đóng lại nội dung .</h2> <div class="alert"> <span class="closebtn">×</span> <strong> 111111111111111111111 </div> <div class="alert success"> <span class="closebtn">×</span> <strong>bbbbbbbbbbbbbb22222222222222222222. </div> <div class="alert info"> <span class="closebtn">×</span> <strong>ccccccccccccccccc</strong> </div> <div class="alert warning"> <span class="closebtn">×</span> <strong>Warning!</strong> Indicates a warning that might need attention. </div> <script> var close = document.getElementsByClassName("closebtn"); var i; for (i = 0; i < close.length; i++) { close[i].onclick = function(){ var div = this.parentElement; div.style.opacity = "0"; setTimeout(function(){ div.style.display = "none"; }, 600); } } </script>

DAT007 KÍNH CHÚC CÁC BẠN THÀNH CÔNG TRONG CÔNG VIỆC

Code ẩn hiện nội dung