.toggle() function not working

Question

EDIT:

I have changed to the following but still doesn't work:

    $( document ).ready(function() {
    $('.hide').hide();
    $('#bio1 a').click(function()
    {
      //Change case studies
      $('#more1').toggle('slow');
    });

---

For some reason my jquery toggle function doesn't work, although the .hide() function does. I'm not sure what is the problem, any suggestions welcome!

HTML:

                <h3><a>Some dude</a></h3>
                <p>SOME TEXT
                    <br> <div id="bio1">  <a href="" > <i > <b> Read More </b> </i> </a> <br></div>
                    <div class="hide" id="more1"> SOME TEXT.</p></div>

JAVASCRIPT:

    $( document ).ready(function() {
        $(.hide).hide();
        $('#bio1').click(function()
        {
          $('#more1').toggle(slow);
        });    
    });

Answer 1

There are a couple of issues with your code.

1. $(.hide).hide();is wrong. It has to be $('.hide').hide();
2. $('#more1').toggle(slow);- slow is not defined.

Try this.

$('#bio1').click(function(){
    $('#more1').toggle();   
});

Fiddle

Answer 2

You'll probably receive this error:

Uncaught SyntaxError: Unexpected token .

The reason is because of $(.hide). You need to wrap the class name in quotes $('.hide').

Secondly, you'll get this error:

Uncaught ReferenceError: slow is not defined 

The reason is because of .toggle(slow). Since slow is not a variable so again you need to wrap it inside in quotes '.toggle('slow')'

Final code should look like

$( document ).ready(function() {
    $('.hide').hide();
// -- ^     ^ add this
    $('#bio1').click(function()
    {
      $('#more1').toggle('slow');
      // ----            ^    ^ add this
    });    
});

Fiddle Demo

Answer 3

Put some quotes areound the slow otherwise it will generate errors $('#more1').toggle("slow");

Answer 4

Qoutation is missing here:

$(.hide).hide();

It would be:

$('.hide').hide();

and then the parameter to be changed too:

$('slow') // or time in milliseconds..