javascript - the <ul> isn't collapsing , only extending -
the problem when press on <a>categories</a> <ul> extending when press again nothing
in css file have set display:none;
i have in php/html page
<html> <head> ... <script src="javascript/collapse.js"></script> ... </head> <body>...<ul> <a href="#" onclick="collapse('id1')">categories</a> <ul id="id1"> <li> <a href="#">business</a> </li> <li> <a href="home.php">entertainment</a> </li> <li> <a href="home.php">social media</a> </li> <li> <a href="home.php">others</a> </li> </ul> </ul>...</html> and in collapse.js file
function collapse(id){ var e = document.getelementbyid(id); if(e.style.display="block") e.style.display="none"; if(e.style.display="none") e.style.display="block"; }; i need use html,css , javascript , no others frameworks or libraries
first should use triple equals comparisions in javascript. second, should use else if statement, otherwise second if negate first one:
if(e.style.display === "block"){ e.style.display="none"; } else if (e.style.display === "none") { e.style.display="block"; }
Comments
Post a Comment