Question

Ok an have an accordion, but i am not using jQuery UI. This is my code

xHTML:

<ul>
    <h2>What are your hours?</h2>
    <li>Donec nec justo eget felis facilisis fermentum. Aliquam porttitor mauris sit amet orci. Aenean dignissim tesque felis.</li>

    <h2>What are your hours?</h2>
    <li>Donec nec justo eget felis facilisis fermentum. Aliquam porttitor mauris sit amet orci. Aenean dignissim tesque felis.</li>

    <h2>What are your hours?</h2>
    <li>Donec nec justo eget felis facilisis fermentum. Aliquam porttitor mauris sit amet orci. Aenean dignissim tesque felis.</li>

    <h2>What are your hours?</h2>
    <li>Donec nec justo eget felis facilisis fermentum. Aliquam porttitor mauris sit amet orci. Aenean dignissim tesque felis.</li>
</ul>

And jquery:

$.fn.acc = function() {

  $('li').not(':first').hide();
  $('h2:first').addClass('selected'); 
    $('h2').on('click', function() {
      $('.selected').removeClass('selected');
      $(this).addClass('selected');
      var li = $(this).next('li');
      check = (li.is(':visible')) ? li.slideUp(200) : ($('li').slideUp(200))(li.slideDown(250));
  });
};
// Call the function here
$(function() {
  $('ul').acc();
});

The code is working, but when you click on h2 tag every time you get in the console log the following message:

Uncaught TypeError: object is not a function.

Can someone tell me what is the problem, because the code is ok and works like a charm.

Here is a [link]1
Thanks.

Answer 1

Here is your code redone much simpler and with valid html
— Updated to use selected class —
http://jsfiddle.net/5HfBc/6/

html:

<ul>
    <li><h2>What are your hours?</h2>
        <p>Donec nec justo eget felis facilisis fermentum. Aliquam porttitor mauris sit amet orci. Aenean dignissim tesque felis.</p>
     </li>
     <li><h2>What are your hours?</h2>
        <p>Donec nec justo eget felis facilisis fermentum. Aliquam porttitor mauris sit amet orci. Aenean dignissim tesque felis.</p>
     </li>
     <li><h2>What are your hours?</h2>
        <p>Donec nec justo eget felis facilisis fermentum. Aliquam porttitor mauris sit amet orci. Aenean dignissim tesque felis.</p>
        </li>


    </ul>

javascript:

$.fn.acc = function() {
    $('li:first p').addClass("selected").show();
    $('li h2').click(function(e) {           
        $(this).siblings("p").slideToggle(200)
            .parent().addClass("selected")
            .siblings("li").removeClass("selected")
            .find("p").slideUp(200);
    });
};

$(function() {
  $('ul').acc();
});

css:

ul{width:400px; margin:auto; }
li {margin: 0px; padding: 0;  text-align: left;} 
li p { display: none; }

h2 { font-size:12px; padding:0.5em; background: #e4e4e4; margin: 0px; cursor: pointer; font-weight:bold; font-size:1.5em; line-height: 2em;  border-bottom: 1px solid #c5c5c5; border-top: 1px solid #ffffff; border-radius: 5px; box-shadow: 0px 0px 0px #cdcdcd;} 
.selected h2 {background: #dcdcdc; color:black;}
h2:hover {background-color:#dcdcdc;}