Add CSS
Add a unique name for each new post eg: collapsible1 or collapsible2 etc add at the start of the HTML code after <HTML> tag <style> .collapsible { background-color: #777; color: white; cursor: pointer; padding: 18px; border: none; text-align: left; outline: none; font-size: 15px; } .active, .collapsible:hover { background-color: #555; } .content1 { padding: 0 18px; display: none; overflow: hidden; background-color: #f1f1f1; } </style>
Apply CSS to div and Paragragh
add these classes in the paragrah and the div at the start of the tag <p title="UIBuilder" class="collapsible">UIBuilder class</p> <div class="content1"></div>
Javascript
add at the end of the HTML code before </HTML> tag <script> var coll = document.getElementsByClassName("collapsible"); var i; for (i = 0; i < coll.length; i++) { coll[i].addEventListener("click", function() { this.classList.toggle("active"); var content = this.nextElementSibling; if (content.style.display === "block") { content.style.display = "none"; } else { content.style.display = "block"; } }); } </script>
No comments:
Post a Comment