我的jQuery函数相互中断

Question

When adding two or more functions in my jquery script file the function/s stops working.

It's working perfectly fine when I've only written one function. But when I'm adding a second one both of them stops working.

I've added a JSFiddle of my code: http://jsfiddle.net/b966e9ae/

 function accordion() { $('.content').accordion({active: 'false', collapsible: 'true'}); } function slide() { $('#btnClick').click(function(){ $('.box').toggle('slide', {direction: 'left', 1000}); }); } $(document).ready(function(){ accordion(); slide(); }); 

 div.box { width: 200px; height: 200px; background-color: red; } button#btnClick { position: absolute; top: 200px; left: 500px; } h1 { background-color: #bbb; border: 1px solid #999; outline-color: #999; } 

 <div class="content"> <h1>Rubrik 1</h1> <div class="info"> <p>Detta är lite info</p> <ul> <li>Info 1</li> <li>Info 2</li> <li>Info 3</li> </ul> </div> <h1>Rubrik 2</h1> <div class="info"> <ul> <li>Sked</li> <li>2xTomater</li> <li>1xKryddmått</li> </ul> </div> <h1>Rubrik 3</h1> <div class="info"> <p>Detta</p> <p>är</p> <p>Schysst!</p> </div> <h1>Rubrik 4</h1> <div class="info"> <p>Detta</p> <p>är</p> <p>Schysst!</p> </div> </div> <div class="box"> </div> <button id="btnClick">Click me</button> 

Answer 1

You have a syntax error here:

$('#btnClick').click(function(){
    $('.box').toggle('slide', {direction: 'left', 1000});
                                                ^                                                   
});

It should be:

$('#btnClick').click(function(){
    $('.box').toggle('slide', {
      direction: 'left'
    }, 1000);                                                    ^                                                   
});

Answer 2

$('.box').toggle('slide', {direction: 'left', 1000});

this is throwing an error (check your console).

It has to be:

$('.box').toggle('slide', {direction: 'left'}, 1000);

Demo