Accordion based on a table with icons

Question

I am building a table-based accordion to show records with the following code:

<style>
table{ width: 75%; }
tr {border: 2px solid #AEAEAE;}
.border1 {border:  1px solid #ddd; padding:3px; }
.imgmais {  width: 20px; height: 20px; background: url(ic_mais.png) center center/20px no-repeat; ;}
.imgmenos {  width: 20px; height: 20px; background: url(ic_menos.png) center center/20px no-repeat; ;}
.topico { width: 100%; display:inline-block; height: 30px; border:1px solid red;}
.topico-item { float:left;  border:0px solid black;}
.tam1 {width: 40px;}

</style>

<table id="table_a">
    <tr><td class="tam1"><input class="radio" type="radio" name="rdbsel" value="777777" id="rad001"/></div></td><td>Fazenda São Carlos</td><td><div id="icone-001" class="imgmais"></div></td></tr>
    <tr><td colspan="3"><div class="border1"><p>Blah blah blah blah blah blah blah blah blah blah blah
        blah blah blah blah blah blah blah blah blah blah blah blah blah blah
        blah blah blah blah blah blah blah blah blah blah blah blah blah blah.</p></div>
    </td></tr>

    <tr><td class="tam1"><input class="radio" type="radio" name="rdbsel" value="666666" id="rad002"/></div></td><td>Frigorífico Avícola Votuporanga Ltda (Núcleo I e II)</td><td><div id="icone-002" class="imgmais"></div></td></tr>
    <tr><td colspan="3"><div class="border1"><p>Blah blah blah blah blah blah blah blah blah blah blah
        blah blah blah blah blah blah blah blah blah blah blah blah blah blah
        blah blah blah blah blah blah blah blah blah blah blah blah blah blah.</p></div>
    </td></tr>

    <tr><td class="tam1"><input class="radio" type="radio" name="rdbsel" value="333333" id="rad003"/></div></td><td>Estancia Frango Rico</td><td><div id="icone-003" class="imgmais"></div></td></tr>
    <tr><td colspan="3"><div class="border1"><p>Blah blah blah blah blah blah blah blah blah blah blah
        blah blah blah blah blah blah blah blah blah blah blah blah blah blah
        blah blah blah blah blah blah blah blah blah blah blah blah blah blah.</p></div>
    </td></tr>
</table>
<script src='https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js'>
<script>

$(function() {
    $("td[colspan=3]").find("p").hide();

    $("#table_a").find('.radio').click(function(event) {
        let _idrbt = $(this).attr('id');
        $("table").find(".imgmenos").closest("tr").next().find("p").slideToggle();
        $("table").find(".imgmenos").removeClass('imgmenos').addClass('imgmais');
    });

    $("#table_a").find('.imgmais').click(function(event) {

            let _idrowclicada = $(this).attr('class');
            $("table").find(".imgmenos").closest("tr").next().find("p").slideToggle();
            $("table").find(".imgmenos").removeClass('imgmenos').addClass('imgmais');
            if( _idrowclicada=='imgmais' ){  
                $(this).removeClass('imgmais').addClass('imgmenos');
            } else {
                $(this).removeClass('imgmenos').addClass('imgmais');
            }

            let $target = $(event.target);
            $target.closest("tr").next().find("p").slideToggle();
    });
});

<script>

Control is performed by Jquery. Each line has an icon (+) that expands the detail or (-) that hides the detail. I expand the detail of a line, and when I expand another line it hides the previous detail. The problem happens when I only have an expanded detail and I try to close it myself, then it gets lost, hides and then expands. Then changes the icon. Could you help me find out where the mistake is in this situation?

Answer 1

The problem lies in the stretch of expanding and collecting the paragraph:

$("#table_a").find('.imgmais').click(function(event) {
    let _idrowclicada = $(this).attr('class');

    $("table").find(".imgmenos").closest("tr").next().find("p").slideToggle();
    $("table").find(".imgmenos").removeClass('imgmenos').addClass('imgmais');

    if( _idrowclicada=='imgmais' ){  
        $(this).removeClass('imgmais').addClass('imgmenos');
    } else {
        $(this).removeClass('imgmenos').addClass('imgmais');
    }

    let $target = $(event.target);
    $target.closest("tr").next().find("p").slideToggle();
});

Note that regardless of the status of the clicked item, you always try to collect the paragraph and change the image:

$("table").find(".imgmenos").closest("tr").next().find("p").slideToggle();
$("table").find(".imgmenos").removeClass('imgmenos').addClass('imgmais');

However, this section should only occur if the clicked item is not yet expanded, that is, when it was clicked on plus, as you already have a condition that checks this:

if( _idrowclicada=='imgmais' ){  

Just then put the stretch within that condition:

if( _idrowclicada=='imgmais' ){  
    $("table").find(".imgmenos").closest("tr").next().find("p").slideToggle();
    $("table").find(".imgmenos").removeClass('imgmenos').addClass('imgmais');
    $(this).removeClass('imgmais').addClass('imgmenos');
} else {
    $(this).removeClass('imgmenos').addClass('imgmais');
}

---

Your complete code will then be more or less as follows:

$(function() {
    $("td[colspan=3]").find("p").hide();

    $("#table_a").find('.radio').click(function(event) {
        let _idrbt = $(this).attr('id');
        $("table").find(".imgmenos").closest("tr").next().find("p").slideToggle();
        $("table").find(".imgmenos").removeClass('imgmenos').addClass('imgmais');
    });

    $("#table_a").find('.imgmais').click(function(event) {
        let _idrowclicada = $(this).attr('class');

        if( _idrowclicada=='imgmais' ){  
            $("table").find(".imgmenos").closest("tr").next().find("p").slideToggle();
            $("table").find(".imgmenos").removeClass('imgmenos').addClass('imgmais');
            $(this).removeClass('imgmais').addClass('imgmenos');
        } else {
            $(this).removeClass('imgmenos').addClass('imgmais');
        }

        let $target = $(event.target);
        $target.closest("tr").next().find("p").slideToggle();
    });
});

table {
    width: 75%;
}

tr {
    border: 2px solid #AEAEAE;
}

.border1 {
    border: 1px solid #ddd;
    padding: 3px;
}

.imgmais {
    width: 20px;
    height: 20px;
    background: url(https://i.stack.imgur.com/7gAlw.png) center center/20px no-repeat;
}

.imgmenos {
    width: 20px;
    height: 20px;
    background: url(https://i.stack.imgur.com/1LHtV.png) center center/20px no-repeat;
}

.topico {
    width: 100%;
    display:inline-block;
    height: 30px;
    border:1px solid red;
}

.topico-item {
    float: left;
    border: 0px solid black;
}

.tam1 {
    width: 40px;
}

<script src='https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js'></script>

<table id="table_a">
    <tr>
        <td class="tam1">
            <input class="radio" type="radio" name="rdbsel" value="777777" id="rad001"/>
        </td>
        <td>
          Fazenda São Carlos
        </td>
        <td>
            <div id="icone-001" class="imgmais">
            </div>
        </td>
    </tr>
    <tr>
        <td colspan="3">
            <div class="border1">
                <p>Blah blah blah blah blah blah blah blah blah blah blah
              blah blah blah blah blah blah blah blah blah blah blah blah blah blah
              blah blah blah blah blah blah blah blah blah blah blah blah blah blah.
                </p>
            </div>
        </td>
    </tr>

    <tr>
        <td class="tam1">
            <input class="radio" type="radio" name="rdbsel" value="666666" id="rad002"/>
        </td>
        <td>Frigorífico Avícola Votuporanga Ltda (Núcleo I e II)</td>
        <td>
            <div id="icone-002" class="imgmais"></div>
        </td>
    </tr>

    <tr>
        <td colspan="3">
            <div class="border1">
                <p>Blah blah blah blah blah blah blah blah blah blah blah
              blah blah blah blah blah blah blah blah blah blah blah blah blah blah
              blah blah blah blah blah blah blah blah blah blah blah blah blah blah.
                </p>
            </div>
        </td>
    </tr>

    <tr>
        <td class="tam1">
            <input class="radio" type="radio" name="rdbsel" value="333333" id="rad003"/>
        </td>
        <td>Estancia Frango Rico</td>
        <td>
            <div id="icone-003" class="imgmais"></div>
        </td>
    </tr>

    <tr>
        <td colspan="3">
            <div class="border1">
                <p>Blah blah blah blah blah blah blah blah blah blah blah
              blah blah blah blah blah blah blah blah blah blah blah blah blah blah
              blah blah blah blah blah blah blah blah blah blah blah blah blah blah.
                </p>
            </div>
        </td>
    </tr>
</table>