JSFiddle - React, Tailwind, and code Playground

by Marcell Alves

HTML

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
<div id="box-toggle">
    <fieldset>
        <legend style="overflow: hidden;">
            Endereço Cobrança 
            <img src="https://cdn2.iconfinder.com/data/icons/icojoy/noshadow/transparent/png/24x24/001_01.png" name="mostraEsconde" alt="Mostrar" title="Mostrar" style="position: relative; top: 30%; left: 3%;">
        </legend>
        <div class="tgl" style="display: none;">
            <input name="data[Endereco0][id]" id="enderecoID" value="49781" type="hidden">
            <div class="input select">
                <label for="tipos_enderecoID">Tipo Endereço</label>
                <select name="data[Endereco0][tipo_endereco_id]" id="tipos_enderecoID" style="width: 98%">
                    <option value=""> Selecionar </option>
                    <option value="1">Residencial</option>
                    <option value="2">Entrega</option>
                    <option value="3" selected="selected">Cobrança</option>
                    <option value="4">Comercial</option>
                </select>
            </div>
            <div class="input text">
                <label for="Endereco0Rua">Rua</label>
                <input name="data[Endereco0][rua]" value="R SETE DE SETEMBRO" id="Endereco0Rua" type="text">
            </div>
            <div class="input text">
                <label for="Endereco0Numero">Numero</label>
                <input name="data[Endereco0][numero]" value="427" id="Endereco0Numero" type="text">
            </div>
            <div class="input text">
                <label for="Endereco0Complemento">Complemento</label>
                <input name="data[Endereco0][complemento]" value="Complemento teste" id="Endereco0Complemento" type="text">
            </div>
            <div class="input text">
                <label for="Endereco0Cep">Cep</label>
                <input name="data[Endereco0][cep]" value="96015300" id="Endereco0Cep"...

JavaScript

//    Script para revelar/esconder os endereços
jQuery.fn.toggleText = function(a, b) {
    return this.html(this.html().replace(new RegExp('(' + a + '|' + b + ')'), function(x) {
        return (x == a) ? b : a;
    }));
}
$(document).ready(function() {
    var img = document.getElementsByName('mostraEsconde');
    $('.tgl').css('display', 'none')
    $('legend', '#box-toggle').click(function(){
        $(this).next().slideToggle('slow')
            .siblings('.tgl:visible').slideToggle('fast');
        // aqui começa o funcionamento do plugin
        $(this).toggleText(img.srcset = 'https://cdn2.iconfinder.com/data/icons/icojoy/noshadow/transparent/png/24x24/001_01.png', img.srcset = 'https://cdn2.iconfinder.com/data/icons/icojoy/shadow/standart/png/24x24/001_02.png')
            .siblings('legend').next('.tgl:visible').prev()
            .toggleText(img.srcset = 'https://cdn2.iconfinder.com/data/icons/icojoy/noshadow/transparent/png/24x24/001_01.png', img.srcset = 'https://cdn2.iconfinder.com/data/icons/icojoy/shadow/standart/png/24x24/001_02.png')
    });
})