Adding animate to show/hide javascript function

Question

This is the first javascript code I have written, and I am having some trouble. I am in the process of making a vertical menu that will show additional information for the link onclick, while also hiding the contents of any other link. I want to add the .animate 'slow' javascript to the function, but having some difficulty. This is what I have:

<script type="text/javascript">
function reveal(id) {
   var e = document.getElementById(id);
   if(e.style.display== 'block')
e.style.display= 'none';
   else
e.style.display= 'block';
e.style.opacity= '1';
    }
 </script>

 <script type="text/javascript">
 function hide(id) {
   var e = document.getElementById(id);
   if(e.style.display== 'block')
e.style.display= 'none';
   else
e.style.display= 'none';
    }
 </script>

I have tried numerous ways to put the 'animate' tag in but can't seem to get it. Help is sincerely appreciated.

Can you post your HTML and if possible a jsFiddle showing the issue? — j08691
– j08691, Commented May 11, 2012 at 16:57
If you want to use animate, you need jQuery. There is no native JS called animate — mplungjan
– mplungjan, Commented May 11, 2012 at 17:09
<a href="#" onclick="reveal('foo');hide('too');">Click here to toggle visibility of element #foo</a> <div id="foo">This is foo</div> <a href="#" onclick="reveal('too'); hide('foo');">Click here to toggle visibility of element #too</a> <div id="too">This is too</div> — Kyle
– Kyle, Commented May 11, 2012 at 17:10
Oh, I had seen this post: stackoverflow.com/questions/2960741/… and tried that and got that toggle animation to work. I just want to apply that same visual effect to what I made there — Kyle
– Kyle, Commented May 11, 2012 at 17:12
As mplungjan points out, animate (and hide) are jQuery functions. If you want to use them you'll need to include jQuery, otherwise you'll have to code the equivalent pure JavaScript functions yourself. — j08691
– j08691, Commented May 11, 2012 at 17:24

Huangism · Accepted Answer · 2012-05-11 19:09:37Z

1

Looking at the fiddle, it seems very confusing. I came up with a cleaner set of codes you can use for now but you got a lot to learn. Fiddle added http://jsfiddle.net/KMDjR/7/ MAKE SURE you call jquery (in fiddle it is called on the left but in your page you need to call it yourself as my code below indicates)

<html>
<head>

<style>
#foo{
display: none;
}

#poo{
display: none;
}
</style>
<!-- calling jquery  -->
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script>
$(document).ready(function(){
    $('.toggleFoo').live('click', function() {
        $('#foo').fadeIn(1000);
        $('#poo').fadeOut(1000);
    });

    $('.togglePoo').live('click', function() {
        $('#poo').fadeIn(1000);
        $('#foo').fadeOut(1000);
    });

});
</script>
</head>
    <body>
        <a href="#" class="toggleFoo">Click here to toggle visibility of element #foo</a><br /><br />
        <div id="foo">This is foo</div>

        <a href="#" class="togglePoo">Click here to toggle visibility of element #poo</a><br /><br />
        <div id="poo">This is poo</div>
</body>
</html>

edited May 11, 2012 at 19:09

answered May 11, 2012 at 18:38

Huangism

16.5k7 gold badges51 silver badges75 bronze badges

Sign up to request clarification or add additional context in comments.

7 Comments

Kyle Over a year ago

Thanks for your response Huangism, I know I certainly have a long way to go with code (like I said, this is my first code I have ever written in javascript or jquery). Unfortunately, this did not work on my site. Perhaps there is a conflict hookahi.com/menu-test#

Huangism Over a year ago

if you copy the core from the code I provided, it should do what you want but you should really start with basic javascript and work your way up. I also want that check mark!

Kyle Over a year ago

Thanks for responding. Yeah I put the code in just as you have it, but I am not getting any response when I click the links. Did you look over the link I posted?

Huangism Over a year ago

you mean the fiddle link? Ye i looked, it was a huge mess i will create a fiddle and attach it to my answer

Kyle Over a year ago

I meant this one hookahi.com/menu-test# it has the test page. I can't tell why it isn't working...

|

Collectives™ on Stack Overflow

Adding animate to show/hide javascript function

1 Answer 1

7 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

7 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related