Question

 var header = $("#accordion");

            $.each(data, function () {
                header.append("<a id='Headanchor' href='javascript:toggleDiv($(this));'>" +   this.LongName + "</a>" + "<br />",
                "<div id='myContent' style='display:none'>" +
                "<ul>" +
                "<li>" + "ID: " + this.Id + "</li>" +
                "<li>" + "Short Name: " + this.ShortName + "</li>" +  "</ul>" + "</div>"
                );


                function toggleDiv(element) {
       var x = element.next();
       x.toggle();

       <div id="accordion">

</div>

working script for just one div i.e. first

function toggleDiv() {

              $("#myContent").toggle();

}

I want to toggle the div’s depending on which anchor tag is clicked but not able to do it. If i use the id selector then the first div gets toggled but not rest of them as they get the same id’s which is erong..can somone please help me out with this ….

Answer 1

In javascript:toggleDiv($(this)) this is pointing to window, not to an object. See JS fiddle. So change code below:

"<a id='Headanchor' href='javascript:toggleDiv($(this));'>"

to:

"<a id='Headanchor' href='#' onclick='return toggleDiv($(this));'>"

and JS code:

function toggleDiv(element) {
       var x = element.next();
       x.toggle();
       return false;
}

Besides, IDs should be unique and in your code you will have multiple Headanchor elements.