0
I would like to change the code I have here, so that instead of appearing "Reveal Content" in all lines of the slideToggle, I can put each one with a title, for example " Revision 1", then the next "Revision 2" And so on, in the code that I have the title is being given in javascript, maybe there’s a way to name it by HTML to make it simpler. Follow the code below:
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>
This is a very interesting method to automate, but in my case, as the numbers will not always be sequential, it would not help and would have to do manually. Thanks for the tip.
– lucasecorrea