How to get the class name of the element that was clicked on and use that same class name to manipulate the other elements?

Question

I have a table dropdown when selected on certain links specified by its href value href="javascript:animatedcollapse.toggle('ID')" . When clicked, it will show the description and works as intended using the animatedcollapse.js plugin.

The part that doesn't work and am trying to incorporate is to transform the arrow in a upward direction when any of the <a> tag with href="javascript:animatedcollapse.toggle('AAA')" is clicked, it will point to this arrow ( <a href="javascript:animatedcollapse.toggle('AAA')" class="link AAA"><span class="arrow"></span></a> ) with the same class name as an identifier to then manipulate that class name .arrow by adding class .arrow-up to transform it back to its default ( .arrow-down ) when the description is collapsed.

Here's the jsfiddle: https://jsfiddle.net/o2gxgz9r/73382/

HTML:

<tr>
    <td style="vertical-align:top; width:64px">
        <a class="AAA" href="javascript:animatedcollapse.toggle('AAA')">AAA</a>
    </td>
        <td style="vertical-align:top; width:585px">
        <a class="AAA" href="javascript:animatedcollapse.toggle('AAA')">Heading 1</a>
        <a href="javascript:animatedcollapse.toggle('AAA')" class="link AAA"><span class="arrow"></span></a>

        <p id="AAA" groupname="table-dropdown" speed="400" style="display: none;">DESCRIPTION - Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum</p>
    </td>
</tr>

CSS:

.arrow {
   margin-left: 8px;
   border-right: 5px solid #000;
   border-bottom: 5px solid #000;
   width: 11px;
   height: 11px;
   transform: rotate(45deg);
   transition: .25s transform;
}
.arrow-up {
   transform: rotate(-135deg);
   transition: .25s transform;
}
.arrow-down {
   transform: rotate(0deg);
   transition: .25s transform;
}

JS:

// transform .arrow when show/hide collapse 
var classID;
$('a[href*="animatedcollapse"]').click(function(){ // detect any href with animatedcollapse clicked
    classID = $(this).attr(class); // get the class name of the elememt that was clicked on
    $(classID).find('.link').children('.arrow').toggleClass('arrow-up'); // find class with .link and toggleClass its children with class name .arrow
    console.log(classID + ' was clicked!'); 
});

Answer 1

$(document).ready(function(){
   animatedcollapse.ontoggle=function($, divobj, state){ //fires each time a DIV is expanded/contracted
    //$: Access to jQuery
    //divobj: DOM reference to DIV being expanded/ collapsed. Use "divobj.id" to get its ID
    //state: "block" or "none", depending on state
    }
    animatedcollapse.init();

    animatedcollapse.addDiv('AAA', 'fade=0,speed=400,group=table-dropdown,hide=1');
    animatedcollapse.addDiv('BBB', 'fade=0,speed=400,group=table-dropdown,hide=1');
    animatedcollapse.addDiv('CCC', 'fade=0,speed=400,group=table-dropdown,hide=1');

    // transform .arrow when show/hide collapse 
    var classID;
    $('a[href*="animatedcollapse"]').click(function(){ // detect any href with animatedcollapse clicked
        classID = $(this).attr('class'); // get the class name of the elememt that was clicked on
            $('.' + classID).find('.arrow').toggleClass('arrow-up'); // find class with .link and toggleClass its children with class name .arrow
        console.log(classID + ' was clicked!');
    });
});

This line:

$('.' + classID).find('.arrow').toggleClass('arrow-up');

Answer 2

I was able to figure out the transform arrow and below is the working example:

$('a[href*="animatedcollapse"]').click(function(){ // detect any href with animatedcollapse clicked
    classID = $(this).attr('class'); // get the class name of the elememt that was clicked on
    if(classID.includes('link')) {
        $(this).children('.arrow').toggleClass('arrow-up');
    }
    else $('.' + classID).children('.arrow').toggleClass('arrow-up');
});