Show / Hide div by changing the icon

Question

Show / Hide div by changing the icon

Navigation

#1 by (3 votes)
#2 by (2 votes)

2

I have the following Snippet , where by clicking on the the div content is shown (revealed) and clicking on the thecontentofthediviscollapsed(hidden),howevertheimagesarenotchangingcorrectly,doesanyoneknowhowtofixit!?

//    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.getElementById('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')
    });
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script><divid="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"id="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" type="text">
            </div>
            <div class="input text">
                <label for="Endereco0Bairro">Bairro</label>
                <input name="data[Endereco0][bairro]" value="CENTRO" id="Endereco0Bairro" type="text">
            </div>
            <div class="input select">
                <label for="estadoID_0">Selecione o Estado</label>
                <select name="data[Endereco0][uf]" id="estadoID_0" style="width: 98%">
                    <option value=""> Selecionar </option>
                    <option value="IN">IN - Indefinido</option>
                    <option value="AC">AC - Acre</option>
                    <option value="AL">AL - Alagoas</option>
                    <option value="AM">AM - Amazonas</option>
                    <option value="AP">AP - Amapá</option>
                    <option value="BA">BA - Bahia</option>
                    <option value="CE">CE - Ceará</option>
                    <option value="DF">DF - Distrito Federal</option>
                    <option value="ES">ES - Espírito Santo</option>
                    <option value="GO">GO - Goiás</option>
                    <option value="MA">MA - Maranhão</option>
                    <option value="MG" selected="selected">MG - Minas Gerais</option>
                    <option value="EX">EX - Exterior</option>
                </select>
            </div>
            <div class="input select">
                <label for="municipioID_0">Selecione a Cidade</label>
                <select name="data[Endereco0][municipio_id]" id="municipioID_0" style="width: 98%">
                    <option value=""> Selecionar </option>
                    <option value="3" selected="selected">Abadia dos Dourados</option>
                    <option value="6">Abaeté</option>
                    <option value="7">Abaeté dos Mendes (Rio Paranaíba)</option>
                </select>
            </div>
        </div>
    </fieldset>
    <br>
    <br>
    <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"id="mostraEsconde" alt="Mostrar" title="Mostrar" style="position: relative; top: 30%; left: 3%;">
        </legend>
        <div class="tgl" style="display: none;">
            <input name="data[Endereco1][id]" id="enderecoID" value="50888" type="hidden">
            <div class="input select">
                <label for="tipos_enderecoID">Tipo Endereço</label>
                <select name="data[Endereco1][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="Endereco1Rua">Rua</label>
                <input name="data[Endereco1][rua]" value="R SETE DE SETEMBRO" id="Endereco1Rua" type="text">
            </div>
            <div class="input text">
                <label for="Endereco1Numero">Numero</label>
                <input name="data[Endereco1][numero]" value="427" id="Endereco1Numero" type="text">
            </div>
            <div class="input text">
                <label for="Endereco1Complemento">Complemento</label>
                <input name="data[Endereco1][complemento]" value="Complemento teste" id="Endereco1Complemento" type="text">
            </div>
            <div class="input text">
                <label for="Endereco1Cep">Cep</label>
                <input name="data[Endereco1][cep]" value="96015300" id="Endereco1Cep" type="text">
            </div>
            <div class="input text">
                <label for="Endereco1Bairro">Bairro</label>
                <input name="data[Endereco1][bairro]" value="CENTRO" id="Endereco1Bairro" type="text">
            </div>
            <div class="input select">
                <label for="estadoID_1">Selecione o Estado</label>
                <select name="data[Endereco1][uf]" id="estadoID_1" style="width: 98%">
                    <option value=""> Selecionar </option>
                    <option value="IN">IN - Indefinido</option>
                    <option value="AC">AC - Acre</option>
                    <option value="AL">AL - Alagoas</option>
                    <option value="AM">AM - Amazonas</option>
                    <option value="AP">AP - Amapá</option>
                    <option value="BA">BA - Bahia</option>
                    <option value="CE">CE - Ceará</option>
                    <option value="DF">DF - Distrito Federal</option>
                    <option value="ES">ES - Espírito Santo</option>
                    <option value="GO">GO - Goiás</option>
                    <option value="MA">MA - Maranhão</option>
                    <option value="MG" selected="selected">MG - Minas Gerais</option>
                </select>
            </div>
        </div>
    </fieldset>
    <br>
    <br>
    <div class="submit">
        <input value="Editar" type="submit">
    </div>
</div>

NOTE: The second item works normally, the first one is bugging ...

jquery

asked by anonymous 02.03.2017 / 12:36

2 answers

2

Change the selector to:

var img = document.querySelectorAll('img');

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.querySelectorAll('img');
    $('.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')
    });
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script><divid="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"id="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" type="text">
            </div>
            <div class="input text">
                <label for="Endereco0Bairro">Bairro</label>
                <input name="data[Endereco0][bairro]" value="CENTRO" id="Endereco0Bairro" type="text">
            </div>
            <div class="input select">
                <label for="estadoID_0">Selecione o Estado</label>
                <select name="data[Endereco0][uf]" id="estadoID_0" style="width: 98%">
                    <option value=""> Selecionar </option>
                    <option value="IN">IN - Indefinido</option>
                    <option value="AC">AC - Acre</option>
                    <option value="AL">AL - Alagoas</option>
                    <option value="AM">AM - Amazonas</option>
                    <option value="AP">AP - Amapá</option>
                    <option value="BA">BA - Bahia</option>
                    <option value="CE">CE - Ceará</option>
                    <option value="DF">DF - Distrito Federal</option>
                    <option value="ES">ES - Espírito Santo</option>
                    <option value="GO">GO - Goiás</option>
                    <option value="MA">MA - Maranhão</option>
                    <option value="MG" selected="selected">MG - Minas Gerais</option>
                    <option value="EX">EX - Exterior</option>
                </select>
            </div>
            <div class="input select">
                <label for="municipioID_0">Selecione a Cidade</label>
                <select name="data[Endereco0][municipio_id]" id="municipioID_0" style="width: 98%">
                    <option value=""> Selecionar </option>
                    <option value="3" selected="selected">Abadia dos Dourados</option>
                    <option value="6">Abaeté</option>
                    <option value="7">Abaeté dos Mendes (Rio Paranaíba)</option>
                </select>
            </div>
        </div>
    </fieldset>
    <br>
    <br>
    <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"id="mostraEsconde" alt="Mostrar" title="Mostrar" style="position: relative; top: 30%; left: 3%;">
        </legend>
        <div class="tgl" style="display: none;">
            <input name="data[Endereco1][id]" id="enderecoID" value="50888" type="hidden">
            <div class="input select">
                <label for="tipos_enderecoID">Tipo Endereço</label>
                <select name="data[Endereco1][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="Endereco1Rua">Rua</label>
                <input name="data[Endereco1][rua]" value="R SETE DE SETEMBRO" id="Endereco1Rua" type="text">
            </div>
            <div class="input text">
                <label for="Endereco1Numero">Numero</label>
                <input name="data[Endereco1][numero]" value="427" id="Endereco1Numero" type="text">
            </div>
            <div class="input text">
                <label for="Endereco1Complemento">Complemento</label>
                <input name="data[Endereco1][complemento]" value="Complemento teste" id="Endereco1Complemento" type="text">
            </div>
            <div class="input text">
                <label for="Endereco1Cep">Cep</label>
                <input name="data[Endereco1][cep]" value="96015300" id="Endereco1Cep" type="text">
            </div>
            <div class="input text">
                <label for="Endereco1Bairro">Bairro</label>
                <input name="data[Endereco1][bairro]" value="CENTRO" id="Endereco1Bairro" type="text">
            </div>
            <div class="input select">
                <label for="estadoID_1">Selecione o Estado</label>
                <select name="data[Endereco1][uf]" id="estadoID_1" style="width: 98%">
                    <option value=""> Selecionar </option>
                    <option value="IN">IN - Indefinido</option>
                    <option value="AC">AC - Acre</option>
                    <option value="AL">AL - Alagoas</option>
                    <option value="AM">AM - Amazonas</option>
                    <option value="AP">AP - Amapá</option>
                    <option value="BA">BA - Bahia</option>
                    <option value="CE">CE - Ceará</option>
                    <option value="DF">DF - Distrito Federal</option>
                    <option value="ES">ES - Espírito Santo</option>
                    <option value="GO">GO - Goiás</option>
                    <option value="MA">MA - Maranhão</option>
                    <option value="MG" selected="selected">MG - Minas Gerais</option>
                </select>
            </div>
        </div>
    </fieldset>
    <br>
    <br>
    <div class="submit">
        <input value="Editar" type="submit">
    </div>
</div>

02.03.2017 / 13:16

MySql display the sum field with value null How can I check if a variable is in date format?

score 3 · Accepted Answer

The problem is occurring because the document.getElementById selector expects to return a single element, since the id property is to identify a single element in the DOM. An alternative would be to change the "id" attribute to "name" in the clickable links (name="showHide") and change the selector to:

var img = document.getElementsByName('mostraEsconde');

You can try running here: link