jQuery .next is not functioning

Question

Using the following jQuery here (in the head of the document):

<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script>
function ExpCol(obj)
{
    var nextDiv = obj.next("div");
    nextDiv.animate({height: 'toggle'}, 800, function(){
        var vClass = nextDiv.is(':visible') ? 'collapse' : 'expand';
        obj.children(":first").removeClass().addClass(vClass);
    });     
}
</script>

HTML Markup is like so (in body):

<div id="reqMat" onclick="ExpCol(this);">
    <span class="expand"></span><h4 class="inlineblock">Header Text Here</h4>
</div>
<div style="display: none;">
    <p class="desc">Text in here...</p>
    <p class="desc">Text in here...</p>
</div>

CSS in separate stylesheet looks like this:

.inlineblock
{
    display: inline-block;
}
.expand, .collapse
{
    cursor: pointer;
    display: inline-block;
    font-size: 1.5em;
    padding-right: .1em;
    color: #605953;
}

.expand {
    content: "+";
}
.collapse
{
    content: "-";
}

Why is next not functioning? Is it because I am passing this object into it? If so, what is the correct way to do this?

Answer 1

this is not a jQuery object, nor have you defined a next function for it. (this is the source of the click event, in this case the div DOM element itself)

I imagine you intend:

var nextDiv = $(obj).next("div");

However, since you also have a call to obj.children, I suggest you change your code to:

function ExpCol(element)
{
    var obj = $(element);

    var nextDiv = obj.next("div");
    nextDiv.animate({height: 'toggle'}, 800, function(){
        var vClass = nextDiv.is(':visible') ? 'collapse' : 'expand';
        obj.children(":first").removeClass().addClass(vClass);
    });     
}

or call it with ExpCol($(this)) although this would require you to always remember to pass ExpCol a jQuery object.

Answer 2

.next() is not available in plain DOMElements (unless you add one yourself). You are passing a DOMElement to ExpCol() instead of a jQuery Object.

Change

ExpCol(this);

to

ExpCol($(this));