Difference between revisions of "Template:IIT-Madras/NewHeader"
| Line 409: | Line 409: | ||
.collapsible { | .collapsible { | ||
| − | + | ||
color: white; | color: white; | ||
cursor: pointer; | cursor: pointer; | ||
| Line 421: | Line 421: | ||
.active, .collapsible:hover { | .active, .collapsible:hover { | ||
| − | + | ||
} | } | ||
| Line 441: | Line 441: | ||
overflow: hidden; | overflow: hidden; | ||
transition: max-height 0.2s ease-out; | transition: max-height 0.2s ease-out; | ||
| − | + | ||
} | } | ||
</style> | </style> | ||
| Line 452: | Line 452: | ||
function closeNav() { | function closeNav() { | ||
document.getElementById("mySidenav").style.width = "0"; | document.getElementById("mySidenav").style.width = "0"; | ||
| − | }</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.maxHeight){ | ||
| + | content.style.maxHeight = null; | ||
| + | } else { | ||
| + | content.style.maxHeight = content.scrollHeight + "px"; | ||
| + | } | ||
| + | }); | ||
| + | } | ||
| + | </script> | ||
</html> | </html> | ||
Revision as of 17:05, 8 October 2018
