0

Gostaria de alterar o código que tenho aqui, para que em vez de aparecer "Revelar Conteúdo" em todas as linhas do slideToggle, eu possa colocar cada um com um título, por exemplo " Revisão 1", ai a próxima "Revisão 2" e assim por diante, no código que tenho o título está sendo dado no javascript, talvez tenha um jeito de nomear pelo HTML para ficar mais simples. Segue o código abaixo:

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(){
	$('.tgl').before('<span>Revelar Conteúdo</span>');
	$('.tgl').css('display', 'none')
	$('span', '#box-toggle').click(function() {
		$(this).next().slideToggle('slow')
		.siblings('.tgl:visible').slideToggle('fast');
	
		$(this).toggleText('Revelar','Esconder')
		.siblings('span').next('.tgl:visible').prev()
		.toggleText('Revelar','Esconder')
	});
})
#box-toggle {
	width:500px;
	margin:0 ;
	text-align:justify;
	font:12px/1.4 Arial, Helvetica, sans-serif;
	}
#box-toggle .tgl {margin-bottom:30px;}
#box-toggle span {
	display:block;
	cursor:pointer;
	font-weight:bold;
	font-size:14px;
	color:#c30; 
	margin-top:15px;
	}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.2.3/jquery.min.js"></script>
<div id="box-toggle">

<div class="tgl">

<h2>Versão 152 Revisão 51561 24/10/2018</h2>
<p>Teste teste teste teste teste teste teste teste teste teste teste teste teste teste teste teste teste teste teste teste teste teste teste teste teste teste teste teste teste teste teste teste teste teste teste teste teste teste</p>
</div>

<div class="tgl">
<h2>Conteúdo dois</h2>
<p>Conteúdo 2 conteúdo 2 conteúdo 2 conteúdo 2 conteúdo 2 conteúdo 2 conteúdo 2 conteúdo 2 conteúdo 2 conteúdo 2 conteúdo 2 conteúdo 2 conteúdo 2 conteúdo 2 conteúdo 2 conteúdo 2 conteúdo 2 conteúdo 2 conteúdo 2 conteúdo 2 conteúdo 2 conteúdo 2 conteúdo 2 conteúdo 2 conteúdo 2 conteúdo 2 conteúdo 2 conteúdo 2 conteúdo 2 conteúdo 2 conteúdo 2 conteúdo 2 conteúdo 2 conteúdo 2 conteúdo 2 conteúdo 2 conteúdo 2 conteúdo 2 conteúdo 2 conteúdo 2 conteúdo 2 conteúdo 2 conteúdo 2 conteúdo 2 conteúdo 2 conteúdo 2 conteúdo 2 conteúdo 2 conteúdo 2 conteúdo 2 conteúdo 2 conteúdo 2 conteúdo 2 conteúdo 2 conteúdo 2 conteúdo 2 conteúdo 2 conteúdo 2 conteúdo 2 conteúdo 2 conteúdo 2 conteúdo 2 conteúdo 2</p>
</div>

<div class="tgl">
<h2>Conteúdo três</h2>
<p>jQuery jQuery jQuery jQuery jQuery jQuery jQuery jQuery jQuery jQuery jQuery jQuery jQuery jQuery jQuery jQuery jQuery jQuery jQuery jQuery jQuery jQuery jQuery jQuery jQuery jQuery jQuery jQuery jQuery jQuery jQuery jQuery jQuery jQuery jQuery jQuery jQuery jQuery jQuery jQuery jQuery jQuery jQuery jQuery jQuery jQuery jQuery jQuery jQuery jQuery jQuery jQuery jQuery jQuery jQuery jQuery jQuery jQuery jQuery jQuery jQuery jQuery jQuery jQuery jQuery jQuery jQuery jQuery jQuery jQuery jQuery jQuery jQuery jQuery</p>
</div>

2 Respostas 2

1

No seu codigo, ele está definindo o titulo pela classe, e todas as divs tem a mesma classe. Uma sugestao seria adicionar uma ID em cada div e definir o titulo individualmente:

<style>
    #box-toggle {
    width:500px;
    margin:0 ;
    text-align:justify;
    font:12px/1.4 Arial, Helvetica, sans-serif;
    }
#box-toggle .tgl {margin-bottom:30px;}
#box-toggle span {
    display:block;
    cursor:pointer;
    font-weight:bold;
    font-size:14px;
    color:#c30; 
    margin-top:15px;
    }
</style>

<script>
    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 () {
        $('#tgl1').before('<span>Revelar Conteúdo 1</span>');
        $('#tgl2').before('<span>Revelar Conteúdo 2</span>');
        $('#tgl3').before('<span>Revelar Conteúdo 3</span>');

        $('.tgl').css('display', 'none')

        $('span', '#box-toggle').click(function ()
        {
            $(this).next().slideToggle('slow').siblings('.tgl:visible').slideToggle('fast');

            $(this).toggleText('Revelar', 'Esconder').siblings('span').next('.tgl:visible').prev().toggleText('Revelar', 'Esconder')
        });
    })
</script>

<div id="box-toggle">

    <div class="tgl" id="tgl1">

        <h2>Versão 152 Revisão 51561 24/10/2018</h2>
        <p>Teste teste teste teste teste teste teste teste teste teste teste teste teste teste teste teste teste teste teste teste teste teste teste teste teste teste teste teste teste teste teste teste teste teste teste teste teste teste</p>
    </div>

    <div class="tgl" id="tgl2">
        <h2>Conteúdo dois</h2>
        <p>Conteúdo 2 conteúdo 2 conteúdo 2 conteúdo 2 conteúdo 2 conteúdo 2 conteúdo 2 conteúdo 2 conteúdo 2 conteúdo 2 conteúdo 2 conteúdo 2 conteúdo 2 conteúdo 2 conteúdo 2 conteúdo 2 conteúdo 2 conteúdo 2 conteúdo 2 conteúdo 2 conteúdo 2 conteúdo 2 conteúdo 2 conteúdo 2 conteúdo 2 conteúdo 2 conteúdo 2 conteúdo 2 conteúdo 2 conteúdo 2 conteúdo 2 conteúdo 2 conteúdo 2 conteúdo 2 conteúdo 2 conteúdo 2 conteúdo 2 conteúdo 2 conteúdo 2 conteúdo 2 conteúdo 2 conteúdo 2 conteúdo 2 conteúdo 2 conteúdo 2 conteúdo 2 conteúdo 2 conteúdo 2 conteúdo 2 conteúdo 2 conteúdo 2 conteúdo 2 conteúdo 2 conteúdo 2 conteúdo 2 conteúdo 2 conteúdo 2 conteúdo 2 conteúdo 2 conteúdo 2 conteúdo 2 conteúdo 2 conteúdo 2</p>
    </div>

    <div class="tgl" id="tgl3">
        <h2>Conteúdo três</h2>
        <p>jQuery jQuery jQuery jQuery jQuery jQuery jQuery jQuery jQuery jQuery jQuery jQuery jQuery jQuery jQuery jQuery jQuery jQuery jQuery jQuery jQuery jQuery jQuery jQuery jQuery jQuery jQuery jQuery jQuery jQuery jQuery jQuery jQuery jQuery jQuery jQuery jQuery jQuery jQuery jQuery jQuery jQuery jQuery jQuery jQuery jQuery jQuery jQuery jQuery jQuery jQuery jQuery jQuery jQuery jQuery jQuery jQuery jQuery jQuery jQuery jQuery jQuery jQuery jQuery jQuery jQuery jQuery jQuery jQuery jQuery jQuery jQuery jQuery jQuery</p>
    </div>

</div>
2
  • Era isso mesmo que eu precisava, muito obrigado. Commented 25/10/2018 às 12:05
  • opa, que bom ;)
    – Eloa
    Commented 25/10/2018 às 12:19
1

Você pode usar a função each que itera no array de elementos que selecionou e usar o índice de cada elemento, no meu exemplo coloquei o index+1 porque inicia com 0.

Veja o código funcionando:

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(){
	$('.tgl').each(function(index){
		$(this).before('<span>Revisão '+ (index+1) +'</span>');
	});
	$('.tgl').css('display', 'none')
	$('span', '#box-toggle').click(function() {
		$(this).next().slideToggle('slow')
		.siblings('.tgl:visible').slideToggle('fast');
	
		$(this).toggleText('Revelar','Esconder')
		.siblings('span').next('.tgl:visible').prev()
		.toggleText('Revelar','Esconder')
	});
});
#box-toggle {
	width:500px;
	margin:0 ;
	text-align:justify;
	font:12px/1.4 Arial, Helvetica, sans-serif;
	}
#box-toggle .tgl {margin-bottom:30px;}
#box-toggle span {
	display:block;
	cursor:pointer;
	font-weight:bold;
	font-size:14px;
	color:#c30; 
	margin-top:15px;
	}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.2.3/jquery.min.js"></script>
<div id="box-toggle">

<div class="tgl">

<h2>Versão 152 Revisão 51561 24/10/2018</h2>
<p>Teste teste teste teste teste teste teste teste teste teste teste teste teste teste teste teste teste teste teste teste teste teste teste teste teste teste teste teste teste teste teste teste teste teste teste teste teste teste</p>
</div>

<div class="tgl">
<h2>Conteúdo dois</h2>
<p>Conteúdo 2 conteúdo 2 conteúdo 2 conteúdo 2 conteúdo 2 conteúdo 2 conteúdo 2 conteúdo 2 conteúdo 2 conteúdo 2 conteúdo 2 conteúdo 2 conteúdo 2 conteúdo 2 conteúdo 2 conteúdo 2 conteúdo 2 conteúdo 2 conteúdo 2 conteúdo 2 conteúdo 2 conteúdo 2 conteúdo 2 conteúdo 2 conteúdo 2 conteúdo 2 conteúdo 2 conteúdo 2 conteúdo 2 conteúdo 2 conteúdo 2 conteúdo 2 conteúdo 2 conteúdo 2 conteúdo 2 conteúdo 2 conteúdo 2 conteúdo 2 conteúdo 2 conteúdo 2 conteúdo 2 conteúdo 2 conteúdo 2 conteúdo 2 conteúdo 2 conteúdo 2 conteúdo 2 conteúdo 2 conteúdo 2 conteúdo 2 conteúdo 2 conteúdo 2 conteúdo 2 conteúdo 2 conteúdo 2 conteúdo 2 conteúdo 2 conteúdo 2 conteúdo 2 conteúdo 2 conteúdo 2 conteúdo 2 conteúdo 2</p>
</div>

<div class="tgl">
<h2>Conteúdo três</h2>
<p>jQuery jQuery jQuery jQuery jQuery jQuery jQuery jQuery jQuery jQuery jQuery jQuery jQuery jQuery jQuery jQuery jQuery jQuery jQuery jQuery jQuery jQuery jQuery jQuery jQuery jQuery jQuery jQuery jQuery jQuery jQuery jQuery jQuery jQuery jQuery jQuery jQuery jQuery jQuery jQuery jQuery jQuery jQuery jQuery jQuery jQuery jQuery jQuery jQuery jQuery jQuery jQuery jQuery jQuery jQuery jQuery jQuery jQuery jQuery jQuery jQuery jQuery jQuery jQuery jQuery jQuery jQuery jQuery jQuery jQuery jQuery jQuery jQuery jQuery</p>
</div>

1
  • Esse é um metódo bem interessante de automatizar, mas no meu caso, como o numeros não vai ser sempre sequenciais, não adiantaria e teria que fazer manualmente. Obrigado pela dica. Commented 25/10/2018 às 12:06

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .