Question

I asked a similar question here where I wanted to get a single div to show/hide rather than all the divs. This was solved and I used one of the answers provided. However further down the line I ran into some problems where it would open the wrong corresponding div and it was suggested that I use ID’s to open the correct corresponding div. The divs are dynamically generated along with their ID’s and they are matching as expected.

My problem is that the jQuery script doesn’t work any more (i’ve rewritten it using advice from other answers in the previous question) – does anyone know what the problem is?

Here is the code (jsFiddle)

Answer 1

A quick look at the javascript console (F12) showed the following error message:

 Uncaught ReferenceError: $index is not defined

This error is raised because you are trying to use the variable $index outside of the scope it is defined (within the click handler).

Here is a working modified version with the following alterations:

• within an event handler, using this.id is sufficient to get the ID of an element as this in an event handler is a DOMElement and not a jquery object

• use .replace() or .substring() to get the last two digits of the id. .charAt() only returns 1 character at the specified position

• the ID selector in jquery is #<id> –> "#slidingDiv" + idx

• only prefix the jquery variables with $, not regular variables. it is just a convention but when you see $myvariable you then expect it to be a jquery object

---

DEMO

$(document).ready(function() {

    $(".slidingDiv").hide();
    $(".show_hide").show();

    $(".show_hide").click(function() {
        var id = this.id;
        var idx = id.replace('show_hide', '');
        //var idx = id.substring(id.length-2);
        var divName = "#slidingDiv" + idx;
        $(divName).slideToggle();
    });

});