CODEWITHSUNDEEP
javascriptjquerycss
Sam Adamsh
Sam Adamsh

Reputation: 3391

How does jQuery's toggle function work, how to write it in javascript without jquery?

How would you write a toggle which toggles the display property of an element onmouseover/onmouseout from display:none to display:block;, or regardless, any css property which jquery's toggle can operate on- how exactly would you write a toggle function without jquery?

And why can't you take a javascript css property as a boolean in the following code?

<html>
<head>
<style type="text/css">
a {
 display:none;
}
</style>
<script type="text/javascript">

 function ab(a)
 {
   if(document.getElementById(a).style.display=='none')
   {
     document.getElementById(a).style.display="block";

  }
  else if(document.getElementById(a).style.display=="block")
   {
     document.getElementById(a).style.display="none";

    }
  }

 </script> 
 </head>
 <body>
 <div class="fg">
 <div style="width:100px;height:100px;border:2px solid blue;" onmouseover="ab('g');"
      onmouseout="ab('g');">
  <a id="g" href="http://www.dfadsafafa.com">lajflke</a></div></div>
 </body>
 </html>

Upvotes: 3

Views: 2061

Answers (1)

Jayendra
Jayendra

Reputation: 52799

The solution you mentioned seems fine, but can make it more concise.

function toggle(id){
    var div1 = document.getElementById(id);
    if (div1.style.display == 'none') {
        div1.style.display = 'block'
    } else {
        div1.style.display = 'none'
    }
}

Upvotes: 4

Related Questions