Tengo el siguiente código:
<h1>Posts</h1>
<table>
<thead>
<tr>
<th>Content</th>
<th colspan="3"></th>
</tr>
</thead>
<tbody>
<% @posts.each do |post| %>
<tr>
<td>
<div id="bloque1" class="bloque1">
<%= "#{post.content[0..25]}... " %>
<button onclick="muestra2<%= "#{post.id}" %>();">leer mas</button>
</div>
<div style="display:none" id="bloque2" class="bloque2">
<%= post.content %>
<button onclick="muestra1<%= "#{post.id}" %>();">leer menos</button>
</div>
<script>
function <%= "muestra1#{post.id}" %>(){
document.getElementById('bloque1').style.display="block";
document.getElementById('bloque2').style.display="none";
};
function <%= "muestra2#{post.id}" %>(){
document.getElementById('bloque1').style.display="none";
document.getElementById('bloque2').style.display="block";
};
</script>
</td>
</tr>
<% end %>
</tbody>
</table>
Mi objetivo es:
- Leer más texto o leer menos texto con los botones respectivos en cada registro del listado.
El problema que tengo es:
- Que sólo funciona para el primer registro del listado.
¿Pueden ayudarme? Gracias!!