Button Ẩn, Hiện nội dung

Để tạo Button có nội dung ẩn, hiện bằng nút (button) bấm, xem demo:

Nội dung bạn cần đưa vào, bấm ẦN để đóng lại
Để tạo nút bấm giống như demo này ,bạn cần thêm css cho button:

<style>
 .button:hover {
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhyz6v0On75CLOeaHMCbk3upuBBUnYWZqFVIoMEZAU2FYSoBiwLejtwG1wVoo24FreFDCaoT7TxyO5XQYY47w7Qh1VMg93OPMhe0q-v2dw1YVbrhPn3yuIYbHbmlGNeoCQG4-ZHpxaSAjI/s1600/but-img_in.png)  repeat-x scroll 0 0 rgba(0, 0, 0, 0);color: #00248E;border: 1px solid #777
}
.button {
    background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhkZ2c1B98TWZvl-_20EQbjAL9scMzUUfvqleIJeglBokg82ybQSOdoeQaqrBuMOhwKXu2qi35j5yoNDZjHImKVtNQ2OZtct0OUX1MVFA239jf2huheJiwWlaHNsahobsqDvLEJaSfM5sY/s1600/but-im_gout.png)  repeat-x scroll 0 0 rgba(0, 0, 0, 0);
    border: 1px solid #555;
    color: #fff;
    cursor: pointer;
    font-family: arial,serif;
    font-size: 12px;
    font-weight: bold;
    height: 20px;
    margin: 0 0 10px;
    padding: 3px 10px 0;
}
</style>

Dùng đoạn code bên dưới:

Html

<style>
    .button:hover {
        background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhyz6v0On75CLOeaHMCbk3upuBBUnYWZqFVIoMEZAU2FYSoBiwLejtwG1wVoo24FreFDCaoT7TxyO5XQYY47w7Qh1VMg93OPMhe0q-v2dw1YVbrhPn3yuIYbHbmlGNeoCQG4-ZHpxaSAjI/s1600/but-img_in.png) repeat-x scroll 0 0 rgba(0, 0, 0, 0);
        color: #00248E;
        border: 1px solid #777
    }
    
    .button {
        background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhkZ2c1B98TWZvl-_20EQbjAL9scMzUUfvqleIJeglBokg82ybQSOdoeQaqrBuMOhwKXu2qi35j5yoNDZjHImKVtNQ2OZtct0OUX1MVFA239jf2huheJiwWlaHNsahobsqDvLEJaSfM5sY/s1600/but-im_gout.png) repeat-x scroll 0 0 rgba(0, 0, 0, 0);
        border: 1px solid #555;
        color: #fff;
        cursor: pointer;
        font-family: arial, serif;
        font-size: 12px;
        font-weight: bold;
        height: 20px;
        margin: 0 0 10px;
        padding: 3px 10px 0;
    }

</style>
<div class="bigfont" style="margin-bottom: 0px;background-color: #e6e6e6; border: 1px solid rgb(66, 66, 66);border-bottom:none; height: auto; margin: 0px 0px; padding: 10px; text-align: left; width: auto;">
    <input class="button" onclick="if 
(this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display
 != '') { 
this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display
 = ''; this.innerText = ''; this.value = 'Ẩn'; } else { 
this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display
 = 'none'; this.innerText = ''; this.value = 'Hiện'; }"
    style="margin: 0px; padding: 0px; width: 60px;"
    type="button" value="Xem" />
</div>
<div style="background-color: #e6e6e6; border: 1px solid rgb(66, 66, 66); height: auto; margin: 0px 0px;border-top:none; padding: 10px ; text-align: left; width: auto;">
    <div style="display: none;">
        noi dung
    </div>
</div>

Demo và nhận code:

Code

Result

<style> .button:hover { background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhyz6v0On75CLOeaHMCbk3upuBBUnYWZqFVIoMEZAU2FYSoBiwLejtwG1wVoo24FreFDCaoT7TxyO5XQYY47w7Qh1VMg93OPMhe0q-v2dw1YVbrhPn3yuIYbHbmlGNeoCQG4-ZHpxaSAjI/s1600/but-img_in.png) repeat-x scroll 0 0 rgba(0, 0, 0, 0);color: #00248E;border: 1px solid #777 } .button { background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhkZ2c1B98TWZvl-_20EQbjAL9scMzUUfvqleIJeglBokg82ybQSOdoeQaqrBuMOhwKXu2qi35j5yoNDZjHImKVtNQ2OZtct0OUX1MVFA239jf2huheJiwWlaHNsahobsqDvLEJaSfM5sY/s1600/but-im_gout.png) repeat-x scroll 0 0 rgba(0, 0, 0, 0); border: 1px solid #555; color: #fff; cursor: pointer; font-family: arial,serif; font-size: 12px; font-weight: bold; height: 20px; margin: 0 0 10px; padding: 3px 10px 0; } </style> <div class="bigfont" style="margin-bottom: 0px;background-color: #e6e6e6; border: 1px solid rgb(66, 66, 66);border-bottom:none; height: auto; margin: 0px 0px; padding: 10px; text-align: left; width: auto;"> <input class="button" onclick="if (this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display != '') { this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display = ''; this.innerText = ''; this.value = 'Ẩn'; } else { this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display = 'none'; this.innerText = ''; this.value = 'Hiện'; }" style="margin: 0px; padding: 0px; width: 60px;" type="button" value="Xem" /></div> <div style="background-color: #e6e6e6; border: 1px solid rgb(66, 66, 66); height: auto; margin: 0px 0px;border-top:none; padding: 10px ; text-align: left; width: auto;"> <div style="display: none;"> noi dung </div> </div>

noi dung

Nếu các bạn muốn sử dụng Js để mở rộng nội dung text. Xem Demo:

• Css
  body { margin: 20px; } #displayText { text-decoration: none; margin: 20px; } /* only for demo**********/
• Javascript
  function expand() { var ele = document.getElementById("expandText"); var text = document.getElementById("displayText"); if(ele.style.display == "block") { ele.style.display = "none";//nếu muốn hiện sẵn thì trong id= "expandText" style="display:block" text.innerHTML = "show";//"show"thay đổi text theo ý bạn } else { ele.style.display = "block"; text.innerHTML = "hide";//"hide"thay đổi text theo ý bạn } }
• Html
  <a id="displayText" href="javascript:expand();">Show</a> <div id="expandText" style="display:none">Hi @every body !<br> My site: testtemplatekhoi.blogspot.com</div>
• Result
  Click Show

  Hi @every body !
  My site: testtemplatekhoi.blogspot.com

Và dùng link ảnh mở rộng nội dung:(Source: randomsnippets.com)

• Css(none)
  Bạn có thể thêm css tùy ý
• Javascript
  function toggle5(showHideDiv, switchImgTag) { var ele = document.getElementById(showHideDiv); var imageEle = document.getElementById(switchImgTag); if(ele.style.display == "block") { ele.style.display = "none"; imageEle.innerHTML = '<img src="http://icons.iconarchive.com/icons/icons8/ios7/48/Arrows-Down-4-icon.png">'; } else { ele.style.display = "block"; imageEle.innerHTML = '<img src="http://icons.iconarchive.com/icons/icons8/ios7/48/Arrows-Up-4-icon.png">'; } }
• Html
  <div id="headerDivImg"> <div id="titleTextImg">Let's use images link!</div> </div> <!--thẻ a có thể đặt ở đây--> <div id="contentDivImg" style="display: none;"> Lorem Ipsum is simply dummy text of the printing and typesetting industry.<br> Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. <br>It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. <br>It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</div> <a id="imageDivLink" href="javascript:toggle5('contentDivImg', 'imageDivLink');"><img src="http://icons.iconarchive.com/icons/icons8/ios7/48/Arrows-Down-4-icon.png"></a>
• Result
  Let's use images link!click arrow-up

  Lorem Ipsum is simply dummy text of the printing and typesetting industry.
  Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.
  It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged.
  It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.

  

Bạn có thể test thử trên Test Html Editor
Link to this page:

<a href="http://testtemplatekhoi.blogspot.com/2014/07/button-hien-noi-dung.html">Button Ẩn, Hiện nội dung</a> from testtemplatekhoi.blogspot.com