Show/ Hide div, changing icon

Asked

Viewed 499 times

2

I got the following Snippet, where by clicking on the content of the div is shown (revealed) and when clicking on the content of the div is collected (hidden), however the images are not changing correctly, someone knows how to fix it!?

//    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>
<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" 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 is that it is bugging...

jquery

  • Man, first look at this mistake: Uncaught TypeError: Cannot read property 'replace' of undefined. You are giving this error the moment you click on the icon.

  • Because it is @Douglasgarrido, I noticed, but I think it is the snippet error, because in my code here is not giving this error. (must be some jquery library)

  • Play has code then in a Jsfiddle and see if there is error.

  • Blz, I’m gonna test!

2 answers

3


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

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

You can test the operation here: https://jsfiddle.net/marcellalves/cuww8Lky/10/

  • Dude, your fiddle didn’t work. I made a change in my code, testing with different id’s and the same error proceeded, I made changing to getElementsByName and did not alter the images of any.

  • Test my fiddle again. I made a correction now.

  • I am correcting the fiddle, but it seems that it is not saving my changes. I made a new correction, I apologize for the inconvenience.

  • 1

    I discovered the problem, it creates the versioning via url, follows the url with the correction: https://jsfiddle.net/marcellalves/cuww8Lky/10/

  • I fixed the fiddle link in the answer too.

2

Switch the dial 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>
<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" 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>

  • Perfect @Magichat, I didn’t know this selector! I changed my code and it worked perfectly! Thanks

  • 2

    Remember the id should be unique on each page....

  • True, my fault, but it was good, because I learned a little bit more 8)

Browser other questions tagged jquery

You are not signed in. Login or sign up in order to post.