https://i.sstatic.net/1jm03.pngI am facing an issue where I need to dynamically pass a value in the find() selector to change the image. Here is the code I am using:
$('.vd-accordion-grid .collapse').on('shown.bs.collapse', function() {
var imageid=$(this).parent().find("img").attr("id");
var crid='img#'+imageid;
alert("image id ::: "+imageid);
alert("crid:: "+crid);
$(this).parent().find(crid).attr("src", "resources/vidal/images/accordion_down.svg");
}).on('hidden.bs.collapse', function() {
$(this).parent().find(crid).attr("src", "resources/vidal/images/accordion_right.svg");
});
However, the image is not changing as expected. Interestingly, when I hard code the image id in the find method, the image changes successfully.
$(this).parent().find('img#picid0').attr("src", "resources/vidal/images/accordion_down.svg");
I have actually written HTML code within Java custom tags. Here is an example of the code snippet:
"<a data-toggle=\"collapse\" href=\"#collapse"+iClauseCnt+"\" aria-expanded=\"true\" aria-controls=\"collapse"+iClauseCnt+"\" class=\"\" style=\"color:white;font-size: 15px;\">");
"<img id=\"picid"+iClauseCnt+"\" src=\""+webcontext+"/resources/vidal/images/accordion_down.svg\" alt=\"accordion_down\">");
""+eleClause.valueOf("@name"));
"</a>");